마크다운 및 이미지 정렬
저는 매달 이슈로 기사를 게재하는 사이트를 만들고 있습니다.이것은 간단하며, 저는 마크다운 편집기(여기 스택 오버플로의 WMD 편집기와 같은)를 사용하는 것이 완벽할 것이라고 생각합니다.
그러나 지정된 단락에서 이미지를 오른쪽으로 정렬할 수 있는 기능이 필요합니다.
현재 시스템으로는 그렇게 할 수 있는 방법이 보이지 않습니다. 가능한가요?
HTML을 Markdown에 포함하여 다음과 같은 작업을 수행할 수 있습니다.
<img style="float: right;" src="whatever.jpg">
Continue markdown text...
나는 작은 CSS 3 해킹으로 순수한 마크다운에서 좋은 해결책을 찾았습니다 :-)
![image alt >](/image-right.jpg)
![image alt <](/image-left.jpg)
![image alt ><](/center-image.jpg)
3 CSS 3 코드 플로트 이미지가 .image alt
.<
또는>
.
img[alt$=">"] {
float: right;
}
img[alt$="<"] {
float: left;
}
img[alt$="><"] {
display: block;
max-width: 100%;
height: auto;
margin: auto;
float: none!important;
}
많은 Markdown "추가" 프로세서는 속성을 지원합니다.따라서 다음과 같은 클래스 이름을 포함할 수 있습니다(PHP Markdown Extra).
![Flowers](/flowers.jpeg){.callout}
![Flowers](/flowers.jpeg){: .callout}
그런 다음 스타일시트를 적절한 방법으로 사용할 수 있습니다.
.callout {
float: right;
}
이 구문을 지원하는 경우 내장 마크업이 없고 내용 편집기에서 수정할 필요가 없을 정도로 스타일시트 추상화라는 두 가지 장점을 모두 제공합니다.
Alt 태그와 Alt 태그의 CSS 선택기를 사용한 위의 방법에 대한 대안이 있습니다.대신 다음과 같은 URL 해시를 추가합니다.
먼저 마크다운 이미지 코드:
![my image](/img/myImage.jpg#left)
![my image](/img/myImage.jpg#right)
![my image](/img/myImage.jpg#center)
추가된 URL hash #center를 확인합니다.
이제 CSS 3 속성 선택기를 사용하여 CSS에 이 규칙을 추가하여 특정 경로의 이미지를 선택합니다.
img[src*='#left'] {
float: left;
}
img[src*='#right'] {
float: right;
}
img[src*='#center'] {
display: block;
margin: auto;
}
이와 같은 URL 해시는 클래스 이름을 정의하는 것과 거의 유사하게 사용할 수 있어야 하며 일부 사람들이 해당 솔루션에 대해 언급한 것처럼 ALT 태그를 잘못 사용하는 것이 아닙니다.또한 추가 확장이 필요하지 않습니다.오른쪽과 왼쪽으로 뜨거나 원하는 다른 스타일을 선택합니다.
하여 수직 이미지를 것을 .|
) 구문.이는 일부 마크다운 맛에 의해 지원됩니다(또한 보트를 띄우는 경우 직물에도 지원됩니다).
| I am text to the left | ![Flowers](/flowers.jpeg) |
또는
| ![Flowers](/flowers.jpeg) | I am text to the right |
가장 유연한 솔루션은 아니지만 대부분의 간단한 요구사항에 적합하고, 마크다운 형식으로 읽기 쉬우며, CSS나 원시 HTML을 기억할 필요가 없습니다.
CSS를 포함하는 것은(는)
![Flowers](/flowers.jpeg)
다른 파일의 CSS:
img[alt=Flowers] { float: right; }
<div style="float:left;margin:0 10px 10px 0" markdown="1">
![book](/images/book01.jpg)
</div>
성markdown
마크다운 내부의 가능성.
더 깨끗해도 그냥 놔두는 것이 좋을 것입니다.p#given img { float: right }
스타일 시트 또는<head>
에 싸여 있습니다.style
태그. 그런 다음, 마크다운을 사용합니다.![Alt text](/path/to/img.jpg)
.
저는 표를 사용하는 것에 대한 learnvst의 답변이 꽤 읽기 쉽기 때문에 좋았습니다(마크다운을 쓰는 것의 한 가지 목적).
그러나 GitBook의 Markdown 파서의 경우 테이블을 인식하고 적절하게 렌더링하려면 빈 헤더 라인 외에 구분선을 그 아래에 추가해야 했습니다.
| - | - |
|---|---|
| I am text to the left | ![Flowers](/flowers.jpeg) |
| ![Flowers](/flowers.jpeg) | I am text to the right |
구분선은 3개 이상의 대시를 포함해야 합니다.---
.
Python에서 구현하면 HTML 키/값 쌍과 클래스/id 레이블을 추가할 수 있는 확장 기능이 있습니다.구문은 다음과 같습니다.
![A picture of a cat](cat.png){: style="float:right"}
아니면, 내장된 스타일링이 당신의 배를 띄우지 않는다면,
![A picture of a cat](cat.png){: .floatright}
해당 스타일시트와 함께,stylish.css
:
.floatright {
float: right;
/* etc. */
}
그렉이 말했듯이, 당신은 마크다운에 HTML 콘텐츠를 포함시킬 수 있지만, 마크다운의 요점 중 하나는 광범위한 CSS/HTML 마크업 지식을 가질 필요가 없다는 것입니다.제가 하는 일은 다음과 같습니다.
내 마크다운 파일에서 나는 모든 위키 편집자들에게 모든 이미지를 다음과 같은 것으로 랩하도록 지시합니다.
'<div> // Put image here </div>`
(물론..그들은 무엇인지 모릅니다.<div>
수단, 하지만 그것은 중요하지 않을 것입니다.
마크다운 파일은 다음과 같습니다.
<div>
![optional image description][1]
</div>
[1]: /image/path
그리고 전체 페이지를 감싸는 CSS 콘텐츠에서는 이미지 태그로 원하는 것을 무엇이든 할 수 있습니다.
img {
float: right;
}
물론 당신은 CSS 콘텐츠로 더 많은 것을 할 수 있습니다...(이 특별한 경우, 포장.img
div로 태그를 지정하면 다른 텍스트가 이미지에 감기는 것을 방지할 수 있습니다...이것은 단지 예시일 뿐입니다). 하지만 IMHO의 요점은 잠재적으로 비기술적인 사람들이 CSS/HTML의 안팎에 들어가는 것을 원하지 않는다는 것입니다. 페이지를 감싸는 CSS 콘텐츠를 가능한 한 일반적이고 깨끗하게 만드는 것은 웹 개발자로서 당신에게 달려 있지만, 다시 말하지만, 당신의 편집자들은 그것에 대해 알 필요가 없습니다.
정렬 특성을 직접 사용할 수 있습니다.
<img align="right" width="100" height="100" src="https://images.unsplash.com/photo-1650620109005-099c2de720f8?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxlZGl0b3JpYWwtZmVlZHwxM3x8fGVufDB8fHx8&auto=format&fit=crop&w=500&q=60">
저도 같은 작업을 했고, 다음과 같이 추가하여 이미지를 오른쪽으로 정렬했습니다.
<div style="text-align: right"><img src="/default/image/sms.png" width="100" /></div>
이미지를 왼쪽 또는 가운데에 정렬하려면 대체
<div style="text-align: right">
와 함께
<div style="text-align: center">
<div style="text-align: left">
![Alt Text](image URL){ align=right }
자세한 내용은 여기에서 이 최종 가이드를 참조하십시오.
가장 적합하고 사용자 정의가 가능한 옵션:
<div style="display:flex; align-items: center;">
<div style="flex:1">
<img src="https://www.researchgate.net/profile/Jinsong-Chong/publication/233165295/figure/fig5/AS:667635838640135@1536188196882/Initial-contour-Figure-9-Detection-result-in-low-resolution-image-in-low-resolution-image.ppm"/>
</div>
<div style="flex:1;padding-left:10px;">
<img src="https://www.researchgate.net/profile/Miguel-Vega-4/publication/228966464/figure/fig1/AS:669376512544781@1536603205341/a-Observed-low-resolution-multispectral-image-b-Panchromatic-image-c.ppm" />
</div>
</div>
이렇게 하면 첫 번째 항목이 왼쪽으로 정렬되고 두 번째 항목이 오른쪽으로 정렬됩니다.두 개 이상의 이미지에도 사용할 수 있습니다.
이미지를 약간 들여쓰기 위한 간단한 접근법을 사용하려면 다음과 같이 구분되지 않는 공간을 사용합니다.img
원소의예., <img src="https://user-images.githubusercontent.com/123456/123456789-3aabedfe-deab-4242-97a0-a6641e675e68.png" />
경고 상자 내의 단일 블록에서 문단의 일부로 이미지와 텍스트를 나란히 정렬합니다.
<div class="warning" style='background-color:#EDF2F7; color:#1A2067; border-left: solid #718096 4px; border-radius: 4px;'>
<p style='padding:0.7em; margin-left:0.7em; display: inline-block;'>
<img src="typora_images/image-20211028083121348.png" style="zoom:70%; float:right; padding:0.7em"/>
<b>isomorphism</b> → In mathematics, an isomorphism is a structure-preserving mapping between two structures of the same type that can be reversed by an inverse mapping.<br>
</p>
</div>
출력:
은 내각생가쉬운해결직은것다명니입접시는하로으적책장에▁specify▁is다▁i▁to를 직접 지정하는 것이라고 생각합니다.align="right"
:
<img align="right" src=/logo.png" alt="logo" width="100"/>
나를 위한 이 일
<p align="center">
<img src="/LogoOfficial.png" width="300" >
</p>
가장 간단한 방법은 이미지를 가운데 태그로 묶는 것입니다. 예를 들어...
<center>![Alt test](http://upload.wikimedia.org/wikipedia/en/b/bc/Wiki.png)</center>
Markdown과 관련된 모든 사항은 여기에서 테스트할 수 있습니다. - http://daringfireball.net/projects/markdown/dingus
그럼요.<center>
더 이상 사용되지 않을 수도 있지만, 그것은 간단하고 효과가 있습니다!
언급URL : https://stackoverflow.com/questions/255170/markdown-and-image-alignment
'bestsource' 카테고리의 다른 글
MySQL 테이블의 존재 여부 확인 (0) | 2023.08.07 |
---|---|
SQL Server에서 varbinary를 문자열로 변환하는 중 (0) | 2023.08.07 |
중지 설정 간격 (0) | 2023.08.02 |
아이폰이 연결되지 않았습니다.iPhone이 연결되면 Xcode가 계속됩니다. (0) | 2023.08.02 |
iOS 11 비밀번호 자동 채우기 액세서리 보기 옵션 사용 안 함? (0) | 2023.08.02 |