마크 다운 및 이미지 정렬

190

매월 이슈에 기사를 게시하는 사이트를 만들고 있습니다. 간단하고 Markdown 편집기 ( 스택 오버플로 의 WMD 편집기)를 사용하는 것이 완벽하다고 생각합니다.

그러나 특정 단락에서 이미지를 올바르게 정렬 할 수있는 기능이 필요합니다 .

현재 시스템으로 그렇게하는 방법을 볼 수 없습니다. 가능합니까?

html css markdown

— 제 디자
소스

2

"매월 이슈에 기사를 게시하는 비영리 사이트의 친구를 도와주고 있습니다"없이 질문을하는 것이 어떻습니까?

— JGallardo

11

@JGallardo 시스템을 완벽하게 제어하지 않았으며 솔루션을 구매할 수있는 능력이 없었 음을 분명히 밝히고 싶었습니다. 나는 그 질문을 다르게 표현할 수 있다는 데 동의합니다.

— Jedidja

1

인하 편집자에 관한 것은, 당신은 위대한 사용할 수 있습니다 stackedit.io/editor#를 , :) 거기에 쓸 굉장

— AbdelHady

1

@AbdelHady 2008 년에 출시 된 경우에만 해당 :)

— Jedidja

1

@iPython 2008 년의 질문은 어떻게 4 년 후 (2012 년) 질문과 중복 될 수 있습니까?

— Jedidja

195

Markdown에 HTML을 포함시킬 수 있으므로 다음과 같이 할 수 있습니다.

<img style="float: right;" src="whatever.jpg">

Continue markdown text...

— 그렉 휴길
소스

42

`<img style = "float : right"src = "whatever.jpg"/>divimg

— ma11hew28

대신 인라인 들여 쓰기를 div선호합니다 span. 전체 단락 중심화 div는 좋거나 간단 p합니다.

— 눈

21

이것은 GitHub와 같은 일부 위생 통역사와 더 잘 작동합니다. <img align = "right"src = "whatever.jpg"/>

— benweet

19

@MattDiPasquale 닫는 슬래시가 필요하지 않습니다. 그것은 HTML이 아니라 XHTML입니다.

— CaptSaltyJack 2016

나는 유령 블로그 게시물에 이미지를 포함시키기 위해 이것을 시도했다. <div style = "float : right"> <img ...> </ div>를 사용하면 이미지 주위에 다음 단락이 올바르게 흐르는 반면 <img style = "float : right"...> 단락과 이미지를 넣습니다 나란히 박스에.

— Martin DeMello 2016 년

58

작은 CSS 3 해킹 으로 순수한 Markdown 에서 멋진 솔루션을 찾았습니다. :-)

![image alt >](/image-right.jpg)
![image alt <](/image-left.jpg)
![image alt ><](/center-image.jpg)

왼쪽이나 오른쪽에있는 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;
}

— 오 지체
소스

1

CSS를 MkDocs 디렉토리에 어디에 두어야합니까? @YannDuran

— Ivan Huang

2

@IvanHuang 은 MkDocs 설명서에 따라 extra.css 파일 을 추가 하고 CSS를 해당 파일에 넣었 는지 확인하십시오 .

— Yann Duran

54

많은 Markdown "추가"프로세서가 속성을 지원합니다. 따라서 다음과 같은 클래스 이름을 포함 할 수 있습니다 (PHP Markdown Extra).

![Flowers](/flowers.jpeg){.callout}

또는 대안 적으로 (Maruku, Kramdown , Python Markdown ) :

![Flowers](/flowers.jpeg){: .callout}

그런 다음 스타일 시트를 올바른 방법으로 사용할 수 있습니다.

.callout {
    float: right;
}

이 구문을 지원하는 경우 내장 된 마크 업이없고 컨텐츠 편집기로 수정할 필요가없는 스타일 시트 초록이 두 가지 장점을 모두 제공합니다.

— 게르 비츠
소스

당신이이 모든 것을 쓸 때까지 :! 꽃 {: .callout} <img src = "/ flowers.jpeg"class = "callout"/>

— lfalin

1

동의하지만 Markdown은 종종 * ML-literate가 아닌 사용자를 위해 선택되므로 다른 임의의 구문보다 HTML을 선호 할 이유가 없습니다.

— gerwitz

4

( "이유 없음"은 물론 지나치게 단순화 된 것입니다. 편집자가 최종 HTML 렌더링에서 더 멀어 지거나 더 멀어 지길 원하는 많은 UX 이유가 있습니다. 렌더링 기술을 추상화하기 위해 Markdown을 선택했습니다.)

— gerwitz

33

alt 태그에서 ALT 태그와 CSS 선택기를 사용하는 위의 방법에 대한 대안이 있습니다 ... 대신 다음과 같이 URL 해시를 추가하십시오.

먼저 마크 다운 이미지 코드 :

![my image](/img/myImage.jpg#left)
![my image](/img/myImage.jpg#right)
![my image](/img/myImage.jpg#center)

추가 된 URL 해시 #center에 유의하십시오.

이제 CSS 3 속성 선택기를 사용하여 CSS에이 규칙을 추가하여 특정 경로가있는 이미지를 선택하십시오.

img[src*='#left'] {
    float: left;
}
img[src*='#right'] {
    float: right;
}
img[src*='#center'] {
    display: block;
    margin: auto;
}

거의 클래스 이름을 정의하는 것과 같이 이와 같은 URL 해시를 사용할 수 있어야하며 일부 사람들이 해당 솔루션에 대해 언급 한 것처럼 ALT 태그를 오용하지 않습니다. 또한 추가 확장이 필요하지 않습니다. 플로트 오른쪽과 왼쪽뿐만 아니라 원하는 다른 스타일 중 하나를 수행하십시오.

— 떨림
소스

1

정확히 내가 찾던 것. 당신은 구세주입니다. 내가 추가하고 싶은 한 가지는```h1 h2 {clear : both}```입니다. 그래서 다음 제목이 새로운 줄에서 시작되도록 (이미지와 겹치지 않습니다)

— bhar1red

내가 찾고있는 것처럼 보이지만 어떻게 CSS를 만들 수 있습니까? Markdown에서 어떻게 호출합니까?

— Tony D

이것은 또한 내 것과 같은 훌륭한 솔루션입니다 :)

— OzzyCzech

3

@OzzyCzech-실제로는 솔루션에서 이미지 "alt"태그를 잘못 사용하여 페이지의 접근성 준수에 좋지 않을 수 있습니다.이 솔루션은 src 태그를 통한 비 침입 접근법을 사용합니다.

— 떨림

24

CSS를 포함시키는 것은 나쁘다 :

![Flowers](/flowers.jpeg)

다른 파일의 CSS :

img[alt=Flowers] { float: right; }

67

뭐? 이제 마크 다운 컨텐츠를 변경할 때마다 갑자기 외부 파일을 편집해야합니까? 나에게 좋은 해결책처럼 들리지 않습니다.

— Jordan Reiter

9

@JordanReiter 여기의 모든 사람들은 논리가 여러 위치에 분산 / 구성되는 하나 이상의 파일로 구성된 프로그램을 작성했습니다. 우리는 유지 관리 목적으로 사용합니다. 이것이 왜 그렇게 고통스럽고 끔찍한가?

— z5h

8

마크 다운을 사용하면 프로그래머가 아닌 사용자가 컨텐츠를 작성할 수 있으며 서버에서 직접 액세스하고 편집해야하는 파일에 의존해서는 안됩니다. 또 다른 예 : 데이터베이스의 필드 이름 을 코드에 하드 코딩하는 것은 완전히 정상 이지만 데이터베이스의 필드 값 (예 :)을 기반으로 하드 코딩하는 것은 실수라고 생각 if product.name == 'Tulips'합니다. 가치의 안정성. 걸리는 모든 사람이 변화하고 Flowers에 Flower갑자기 그 이미지가보기 밖으로 나옵니다. 또한 그들은 이미지를 추가 할 때마다 전화를해야합니다!

— Jordan Reiter

24

@cboettig 이것은 alt 태그의 심각한 오용입니다. 이미지를 볼 수없는 사람들을위한 이미지의 텍스트 설명이어야합니다.

— Nathan Grigg

5

많은 사람들이이 솔루션에 대해 울고있는 것에 놀랐습니다. 이것은 특정 호스팅 서비스의 문제를 해결하는 데 필요한 아름다운 해킹입니다. 이 아름다운 해킹을 한 포스터는 이제 사라졌고 대신 커뮤니티에는 울음 소리가 남았습니다.

— Aaron Robinson

22

테이블을 사용하여 이미지를 세로 파이프 ( |) 구문에 맞추면 매우 게으르고 싶습니다 . 이것은 일부 Markdown 맛에 의해 지원됩니다 (그리고 보트에 떠 다니면 Textile에 의해 지원됩니다 ).

| I am text to the left  | ![Flowers](/flowers.jpeg) |

또는

| ![Flowers](/flowers.jpeg) | I am text to the right |

가장 유연한 솔루션은 아니지만 대부분의 간단한 요구에 적합하고 마크 다운 형식으로 읽기 쉽고 CSS 또는 원시 HTML을 기억할 필요가 없습니다.

— 배우다
소스

2

나는이 스타일이 매우 좋습니다. 너무 나쁘지만 github에서 작동하지 않습니다 (아직도 아닙니다)

— Eliot

3

방금 GitHub 에서이 구문을 시도했지만 지금 작동하는 것으로 보입니다.

— Ege Rubak

6

이것은 흥미로운 해킹이지만 레이아웃을 위해 테이블을 잘못 사용하고 있습니다. 1999 년에 오신 것을 환영합니다.

— jxpx777

3

github 플레이 버드 마크 다운의 경우으로 라인을 추가하십시오 |-|-|. 파서에게 테이블이 있음을 알리고 첫 번째 줄은 헤더입니다. 예 : goo.gl/xUCRiK

— Kayla

10

더 깔끔한 것은 p#given img { float: right }스타일 시트 나 태그에 <head>싸서하는 것입니다 style. 그런 다음 markdown을 사용하십시오 ![Alt text](/path/to/img.jpg).

— ma11hew28
소스

8

<div style="float:left;margin:0 10px 10px 0" markdown="1">
    ![book](/images/book01.jpg)
</div>

markdown마크 다운 내부 의 속성 가능성.

— 피터 모텐슨
소스

1

나에게 일했다. github을 사용하지 않습니다. 감사합니다 @raphox.

— Hugo Tavares

Michelf의 바닐라 마크 다운 PHP 파서 와 잘 작동

— Ronan

2

이것은 Markdown Extra 기능이며 일부 컨텐츠 관리 시스템 (예 : Drupal)에 포함되어 있지만 Markdown 자체에는 기능이 포함되어 있지 않습니다.

— Tim

7

learnvst의 답변이 마음에 들었 습니다.테이블을 읽을 수있는 이 (Markdown을 작성하는 목적 중 하나임).

그러나 GitBook의 Markdown 파서의 경우 빈 헤더 행 외에도 그 아래에 구분 기호 행을 추가하여 테이블을 인식하고 올바르게 렌더링해야했습니다.

| - | - |
|---|---|
| I am text to the left  | ![Flowers](/flowers.jpeg) |
| ![Flowers](/flowers.jpeg) | I am text to the right |

구분선은 적어도 3 개의 대시를 포함해야합니다 ---.

— 이카리 토
소스

7

파이썬으로 구현하면 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. */
}

— 자메
소스

2

그렉 이 마크 다운에 HTML 컨텐츠를 포함시킬 수 있다고 말 했지만 마크 다운의 요점 중 하나는 CSS / HTML 마크 업 지식에 대한 광범위한 지식이 필요하지 않다는 것입니다. 이것이 제가하는 것입니다:

Markdown 파일에서 모든 위키 편집자에게 모든 이미지를 다음과 같은 내용으로 감싸도록 지시합니다.

'<div> // Put image here  </div>`

(물론. 그들은 무슨 <div>뜻 인지 알지 못하지만 그건 중요하지 않습니다)

따라서 Markdown 파일은 다음과 같습니다.

<div>
![optional image description][1]
</div>

[1]: /image/path

그리고 전체 페이지를 감싸는 CSS 내용에서 이미지 태그로 원하는 것을 할 수 있습니다.

img {
   float: right;
}

물론 당신은 (포장이 특별한 경우에 ... CSS의 함량이 더 많은 일을 할 수있는 img점 ...이 있지만, 단지 예입니다 DIV 방지 이미지에 대한 포장에서 다른 텍스트 태그)하지만, 이럴 마크 다운을 기술적으로 숙련되지 않은 사람들이 CSS / HTML에 들어가는 것을 원하지 않는다는 것입니다. 웹 페이지는 가능한 한 일반적이고 깔끔한 페이지를 감싸는 CSS 콘텐츠를 만드는 것은 웹 개발자에게 달려 있습니다. 다시 편집자들은 그것에 대해 알 필요가 없습니다.

— 어지럽다
소스

1

나는 같은 작업을했고 이것을 추가하여 이미지를 오른쪽으로 정렬했습니다.

<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">

— 주하 카림
소스

나는 이것을 시도했지만 지금 작동하고 있습니다. 이미지는 정렬되었지만 html 텍스트가 표시됩니다.

— fiza khan

-1

나를위한이 일

<p align="center">
 <img src="/LogoOfficial.png" width="300" >
</p>

— 앤더슨
소스

-16

가장 간단한 방법은 이미지를 중앙 태그로 감싸는 것입니다.

<center>![Alt test](http://upload.wikimedia.org/wikipedia/en/b/bc/Wiki.png)</center>

Markdown과 관련된 모든 것은 여기에서 테스트 할 수 있습니다- http://daringfireball.net/projects/markdown/dingus

물론, <center>더 이상 사용되지 않을 수 있지만 간단하고 작동합니다!

— 요요
소스

1

방금 OP가 올바른 정렬을 요구한다는 것을 알았습니다.이 답변을 우연히 발견했을 때 이미지를 중앙에 배치하려고했습니다.

— yoyo

14

아니요, 절대 사용하지 마십시오 center.

— Jordan Reiter

12

실제로 @yoyo와 함께하겠습니다 <center>. HTML은 내용 만 설명하기 때문에 HTML에서 사용되지 않습니다. 스타일은 스타일 시트에 있어야합니다. 그러나 Markdown은 텍스트 메시지를 전달하는 데 필요한 스타일을 포함하고 나머지는 렌더러 / 사이트로 남겨 두려는 의도가 다릅니다. <center>CSS width, floats, margins 에 대해 생각하는 것보다 훨씬 자연스러워 보입니다 . — Markdown 파서 <center>가 현재 현명하게 문단을 파악하는 방식과 마찬가지로 태그를 적절한 CSS 지원 요소로 대체하는 한까지 나아가고 싶습니다.

— 슬립 D. 톰슨