Markdown และการจัดแนวรูปภาพ

191

ฉันกำลังทำเว็บไซต์ที่เผยแพร่บทความในปัญหาในแต่ละเดือน มันตรงไปตรงมาและฉันคิดว่าการใช้ Markdown editor (เช่นWMDที่นี่ใน Stack Overflow) จะสมบูรณ์แบบ

แต่พวกเขาไม่จำเป็นต้องมีความสามารถในการมีภาพจัดชิดขวาในวรรคที่กำหนด

ฉันไม่เห็นวิธีที่จะทำเช่นนั้นกับระบบปัจจุบัน - เป็นไปได้หรือไม่?

html css markdown

— Jedidja
แหล่งที่มา

2

ทำไมไม่เพียง แต่ถามคำถามโดยไม่มี "ฉันกำลังช่วยเหลือเพื่อนกับเว็บไซต์ที่ไม่แสวงหาผลกำไรซึ่งตีพิมพ์บทความที่มีปัญหาในแต่ละเดือน"?

— JGallardo

11

@JGallardo เพราะฉันต้องการทำให้ชัดเจนฉันไม่สามารถควบคุมระบบได้อย่างสมบูรณ์และฉันไม่มีความสามารถในการซื้อโซลูชันทุกประเภท ฉันยอมรับว่าฉันสามารถใช้ถ้อยคำคำถามที่แตกต่างกัน

— Jedidja

1

เกี่ยวกับบรรณาธิการ markdown คุณสามารถใช้ดีstackedit.io/editor#มันจะน่ากลัวที่จะเขียนในนั้น :)

— AbdelHady

1

@AbdelHady ถ้าเพียง แต่จะได้รับการบริการในปี 2008 :)

— Jedidja

1

@iPython คำถามจากปี 2008 จะซ้ำกับคำถามที่ถาม 4 ปีต่อมา (2012) ได้อย่างไร

— Jedidja

196

คุณสามารถฝัง HTML ใน Markdown ดังนั้นคุณสามารถทำสิ่งนี้:

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

Continue markdown text...

— เกร็กฮิวกิล
แหล่งที่มา

43

ทำความสะอาด & สร้างมาตรฐานโดยการปอกส่วนที่ไม่จำเป็นออกdivและเพิ่มเครื่องหมายทับลงในimgแท็กตามลำดับเช่น `<img style =" float: right "src ="

— Anything.jpg

แทนที่จะdivชอบใช้spanการเยื้องแบบอินไลน์ สำหรับวรรคเต็มตรงกลางเป็นสิ่งที่ดีหรือแม้กระทั่งการที่เรียบง่ายdiv p

— ตา

21

วิธีนี้ใช้ได้ผลดีกับล่ามที่มีสุขอนามัยเช่นเดียวกับ GitHub: <img align = "right" src = "

— what.jpg

19

@MattDiPasquale การปิดทับไม่จำเป็น นั่นคือ XHTML ไม่ใช่ HTML

— CaptSaltyJack

ฉันพยายามทำสิ่งนี้เพื่อฝังรูปภาพในโพสต์บล็อกผี ใช้ <div style = "float: right"> <img ... > </div> ไหลย่อหน้าต่อไปนี้รอบภาพอย่างถูกต้องในขณะที่ <img style = "float: right" ... > วางย่อหน้าและรูปภาพ ในกล่องด้านข้าง

— Martin DeMello

58

ฉันพบทางออกที่ดีในMarkdown บริสุทธิ์ด้วยการแฮ็ค CSS 3 :-)

![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;
}

— OzzyCzech
แหล่งที่มา

1

ควรวาง CSS ไว้ในไดเรกทอรี MkDocs ที่ไหน @YannDuran

— Ivan Huang

2

@IvanHuang เพียงตรวจสอบให้แน่ใจว่าคุณเพิ่มไฟล์extra.cssตามเอกสาร MkDocs แล้วใส่ css ลงในไฟล์นั้น

— Yann Duran

54

ตัวประมวลผล "พิเศษ" ของ Markdown จำนวนมากสนับสนุนแอตทริบิวต์ ดังนั้นคุณสามารถใส่ชื่อคลาสได้ (PHP Markdown Extra):

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

หรืออีกทางหนึ่ง ( Maruku , Kramdown , Python Markdown ):

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

แน่นอนว่าคุณสามารถใช้สไตล์ชีทในวิธีที่เหมาะสม:

.callout {
    float: right;
}

หากคุณรองรับไวยากรณ์นี้มันจะให้ประโยชน์ที่ดีที่สุดแก่คุณทั้งสองโลก: ไม่มีมาร์กอัปแบบฝังและสไตล์ชีทที่เป็นนามธรรมเพียงพอที่จะไม่ต้องแก้ไขโดยเครื่องมือแก้ไขเนื้อหาของคุณ

— gerwitz
แหล่งที่มา

ตามเวลาที่คุณเขียนทั้งหมดนี้:! ดอกไม้ {: .callout} คุณอาจเขียน <img src = "/ flowers.jpeg" class = "ไฮไลต์" />

— lfalin

1

ฉันเห็นด้วย แต่ Markdown มักถูกเลือกสำหรับผู้ใช้ที่ไม่ใช่ * ML-literate ดังนั้นจึงไม่มีเหตุผลที่จะชอบ HTML มากกว่าไวยากรณ์อื่นใด

— gerwitz

4

("ไม่มีเหตุผล" นั้นทำให้เข้าใจได้ง่ายเกินไปมีหลายเหตุผล UX ที่คุณอาจต้องการให้บรรณาธิการของคุณเข้าใกล้หรือไกลกว่าจากการแสดงผล HTML ขั้นสุดท้ายหรือคุณอาจไม่ชอบที่จะแนะนำการพึ่งพา HTML ในเนื้อหาของคุณ ได้เลือก Markdown เพื่อให้นามธรรมเทคนิคการเรนเดอร์)

— gerwitz

33

ฉันมีทางเลือกให้กับวิธีการด้านบนที่ใช้แท็ก ALT และตัวเลือก CSS บนแท็ก alt ... แทนที่จะเพิ่มแฮช URL แบบนี้:

ก่อนอื่นรหัสภาพของคุณ:

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

บันทึก hash URL ที่เพิ่มไว้ #center

ตอนนี้เพิ่มกฎนี้ใน CSS โดยใช้ตัวเลือกแอตทริบิวต์ CSS 3 เพื่อเลือกภาพที่มีเส้นทางที่แน่นอน

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

คุณควรจะสามารถใช้แฮช URL แบบนี้เกือบจะเหมือนการกำหนดชื่อคลาสและมันก็ไม่ใช่การใช้แท็ก ALT ในทางที่ผิดเหมือนบางคนแสดงความคิดเห็นเกี่ยวกับวิธีแก้ปัญหานั้น นอกจากนี้ยังไม่ต้องมีส่วนขยายเพิ่มเติมอีก ทำอย่างใดอย่างหนึ่งเพื่อลอยไปทางขวาและซ้ายเช่นกันหรือรูปแบบอื่น ๆ ที่คุณอาจต้องการ

— การสั่นสะเทือน
แหล่งที่มา

1

สิ่งที่ฉันกำลังมองหา คุณเป็นผู้ช่วยชีวิต สิ่งหนึ่งที่ผมอยากจะเพิ่มเป็น `` `h1 h2 {ชัดเจนทั้ง}` `` ดังนั้นหัวข้อถัดไปจะเริ่มในบรรทัดใหม่ (ไม่ทับซ้อนกับภาพ)

— bhar1red

ดูเหมือนว่าฉันกำลังมองหา แต่ ... ฉันจะสร้าง CSS ได้อย่างไร และฉันจะเรียกมันใน Markdown ได้อย่างไร?

— Tony D

นี่เป็นวิธีแก้ปัญหาที่ยอดเยี่ยมเช่นเดียวกับฉัน :)

— 4324

3

@OzzyCzech - ไม่จริงหรอกโซลูชันของคุณใช้แท็ก "alt" ของภาพซึ่งอาจเป็นผลเสียต่อการปฏิบัติตามนโยบายการเข้าถึงบนหน้าเว็บซึ่งโซลูชันนี้ใช้วิธีการไม่บุกรุกผ่านแท็ก src

— สั่น

24

การฝัง CSS ไม่ดี:

![Flowers](/flowers.jpeg)

CSS ในไฟล์อื่น:

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

67

อะไร? ในทันทีคุณต้องแก้ไขไฟล์ภายนอกทุกครั้งที่คุณเปลี่ยนเนื้อหาที่ทำเครื่องหมาย? ฟังดูเหมือนเป็นคำตอบที่ดีสำหรับฉัน

— Jordan Reiter

9

@JordanReiter ทุกคนที่นี่ได้เขียนโปรแกรมที่ประกอบด้วยมากกว่าหนึ่งไฟล์ที่ตรรกะถูกแพร่กระจาย / จัดระเบียบในหลายสถานที่ เราทำตามวัตถุประสงค์เพื่อการบำรุงรักษา ทำไมสิ่งนี้ถึงเจ็บปวดและแตกต่างกันอย่างสิ้นเชิง?

— z5h

8

Markdown ช่วยให้ผู้ใช้ที่ไม่ใช่โปรแกรมเมอร์สร้างเนื้อหาและไม่ควรขึ้นอยู่กับไฟล์ที่ต้องเข้าถึงและแก้ไขโดยตรงบนเซิร์ฟเวอร์ อีกตัวอย่าง: ฉันคิดว่ามันเป็นเรื่องปกติธรรมดาที่จะเขียนโค้ดชื่อเขตข้อมูลในฐานข้อมูลลงในรหัสของคุณอย่างหนัก แต่ความผิดพลาดในการใส่รหัสขึ้นอยู่กับค่าของเขตข้อมูลในฐานข้อมูลของคุณ (เช่นif product.name == 'Tulips') เพราะคุณไม่สามารถพึ่งพา ความมั่นคงของค่า สิ่งที่ต้องทำคือใครบางคนกำลังเปลี่ยนFlowersไปFlowerและทันใดนั้นภาพนั้นก็ปรากฏออกมาจากสายตา พวกเขาจะต้องโทรหาคุณทุกครั้งที่เพิ่มภาพ!

— Jordan Reiter

24

@cboettig นี่เป็นการนำแท็ก alt ไปใช้อย่างผิด ๆ มันควรจะเป็นคำอธิบายที่เป็นข้อความของภาพสำหรับคนที่ไม่เห็นภาพ

— นาธาน Grigg

5

ฉันประหลาดใจที่หลายคนร้องไห้วิธีนี้ นี่เป็นแฮ็คที่สวยงามซึ่งจำเป็นสำหรับการแก้ปัญหาสำหรับบริการโฮสติ้งบางประเภท โปสเตอร์ที่ให้การแฮ็กที่สวยงามนี้ได้หายไปแล้วและชุมชนก็ถูกทิ้งให้อยู่กับกลุ่ม crybabies แทน

— แอรอนโรบินสัน

22

ฉันชอบที่จะขี้เกียจสุด ๆ โดยใช้ตารางเพื่อจัดแนวรูปภาพด้วย|ไวยากรณ์แนวตั้ง ( ) สิ่งนี้ได้รับการสนับสนุนจากรสชาติ Markdown บางอย่าง (และได้รับการสนับสนุนจากสิ่งทอหากสิ่งนั้นลอยอยู่บนเรือของคุณ):

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

หรือ

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

มันไม่ใช่โซลูชันที่ยืดหยุ่นที่สุด แต่ดีสำหรับความต้องการง่าย ๆ ของฉันส่วนใหญ่อ่านได้ง่ายในรูปแบบ markdown และคุณไม่จำเป็นต้องจำ CSS หรือ HTML แบบดิบใด ๆ

— learnvst
แหล่งที่มา

2

ฉันชอบสไตล์นี้มาก markdown-y น่าเสียดายที่มันไม่สามารถใช้กับ GitHub ได้ (ยังไม่ได้)

— Eliot

3

ฉันเพิ่งลองใช้ไวยากรณ์นี้ที่ GitHub และดูเหมือนว่าจะใช้งานได้ในขณะนี้

— Ege Rubak

6

นี่เป็นแฮ็คที่น่าสนใจ แต่มันใช้ตารางในการจัดวางผิด ยินดีต้อนรับสู่ปี 1999

— jxpx777

3

สำหรับ GitHub รส markdown |-|-|เพิ่มเส้นด้วย มันบอกตัวแยกวิเคราะห์ว่ามีตารางและบรรทัดแรกคือส่วนหัว เช่นgoo.gl/xUCRiK

— Kayla

10

แม้จะสะอาดกว่าก็เพียงแค่ใส่p#given img { float: right }สไตล์ชีทหรือใน<head>และห่อในstyleแท็ก จากนั้นเพียงแค่ใช้ ![Alt text](/path/to/img.jpg)markdown

— ma11hew28
แหล่งที่มา

8

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

markdownความเป็นไปได้ของคุณลักษณะภายใน Markdown

— ปีเตอร์มอร์เทนเซ่น
แหล่งที่มา

1

ทำงานให้ฉัน ฉันไม่ได้ใช้ GitHub ขอบคุณ @raphox

— Hugo Tavares

ทำงานได้ดีกับตัวแยกวิเคราะห์ PHP ของ vanilla michelf

— Ronan

2

นี่คือฟังก์ชั่น Markdown Extra ซึ่งรวมอยู่ในระบบการจัดการเนื้อหาบางส่วน (เช่น Drupal) แต่ไม่รวมฟังก์ชันการทำงานใน Markdown ต่อ se

— ทิม

7

ฉันชอบคำตอบของ learnvstการใช้ตารางเนื่องจากสามารถอ่านได้ค่อนข้างดี (ซึ่งมีจุดประสงค์หนึ่งในการเขียน Markdown)

อย่างไรก็ตามในกรณีของตัวแยกวิเคราะห์ Markdown ของ GitBook ที่ฉันต้องเพิ่มนอกเหนือจากบรรทัดส่วนหัวที่ว่างเปล่าให้เพิ่มบรรทัดตัวคั่นใต้เพื่อให้ตารางได้รับการจดจำและแสดงผลอย่างถูกต้อง:

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

---เส้นคั่นจำเป็นต้องมีอย่างน้อยสามขีดกลาง

— icarito
แหล่งที่มา

7

หากคุณติดตั้งใน 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. */
}

— jameh
แหล่งที่มา

2

อย่างที่ greg กล่าวว่าคุณสามารถฝังเนื้อหา HTML ใน Markdown แต่หนึ่งในจุดของ Markdown คือการหลีกเลี่ยงการมีความรู้เกี่ยวกับ CSS / HTML อย่างกว้างขวาง (หรือสิ่งใดก็ตาม) นี่คือสิ่งที่ฉันทำ:

ในไฟล์ Markdown ของฉันฉันเพียงแค่สั่งให้บรรณาธิการ wiki ของฉันทั้งหมดฝังภาพทั้งหมดด้วยบางสิ่งที่มีลักษณะเช่นนี้:

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

(แน่นอน .. พวกเขาไม่รู้ว่า<div>หมายถึงอะไรแต่ก็ไม่ควรทำอะไร)

ดังนั้นไฟล์ Markdown จะเป็นดังนี้:

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

[1]: /image/path

และในเนื้อหา CSS ที่ล้อมทั้งหน้าฉันสามารถทำสิ่งที่ฉันต้องการด้วยแท็กรูปภาพ:

img {
   float: right;
}

แน่นอนว่าคุณสามารถทำอะไรได้มากขึ้นกับเนื้อหา CSS ... (ในกรณีนี้การห่อimgแท็กด้วย div จะป้องกันข้อความอื่นจากการตัดกับภาพ ... นี่เป็นเพียงตัวอย่างเท่านั้น) แต่ IMHO คือจุดของMarkdownคือคุณไม่ต้องการให้คนที่ไม่ใช่ด้านเทคนิคเข้ามาในส่วนลึกของ CSS / HTML .. มันขึ้นอยู่กับคุณในฐานะนักพัฒนาเว็บเพื่อสร้างเนื้อหา CSS ของคุณที่ล้อมหน้าทั่วไปและสะอาดที่สุดเท่าที่จะทำได้ บรรณาธิการของคุณไม่จำเป็นต้องรู้อีก

— abbood
แหล่งที่มา

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

— Zuha Karim
แหล่งที่มา

ฉันลองสิ่งนี้ แต่ตอนนี้ใช้งานได้อยู่ .. ภาพถูกจัดเรียงไว้ แต่ข้อความ html แสดงขึ้นมา

— fiza khan

-1

งานนี้สำหรับฉัน

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

— Andersonfrfilho
แหล่งที่มา

-16

ง่ายที่สุดคือการตัดภาพในแท็กกลางเช่นนั้น ...

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

สามารถทำอะไรกับ Markdown ได้ที่นี่ - http://daringfireball.net/projects/markdown/dingus

แน่นอนว่า<center>อาจเลิกใช้แล้ว แต่มันง่ายและใช้งานได้!

— yoyo
แหล่งที่มา

1

เพิ่งสังเกตเห็น OP ขอการจัดตำแหน่งที่ถูกต้อง - ฉันพยายามที่จะจัดกึ่งกลางภาพเมื่อฉันสะดุดกับคำตอบนี้

— yoyo

14

centerไม่มีไม่เคยใช้

— Jordan Reiter

12

ฉันจะไปกับ @ooyo จริง ๆ แล้ว<center>สมเหตุสมผล มันคัดค้านจาก HTML เนื่องจาก HTML ควรอธิบายเนื้อหาเท่านั้น สไตล์ควรอยู่ในสไตล์ชีท อย่างไรก็ตาม Markdown มีความตั้งใจที่แตกต่าง: รวมสไตล์ที่จำเป็นในการถ่ายทอดข้อความที่เป็นข้อความและให้ส่วนที่เหลือไปยังโหมดแสดงภาพ / ไซต์ <center>ดูเหมือนเป็นธรรมชาติมากกว่าคิดเกี่ยวกับ CSS widths, floats, margins ... - ฉันจะไปให้ไกลเท่าที่มีตัวแยกวิเคราะห์ Markdown แทนที่<center>แท็กด้วยองค์ประกอบที่สนับสนุน CSS ที่เหมาะสมเช่นเดียวกับวิธีการที่ชาญฉลาดในการคำนวณย่อหน้าวรรค

— Slipp D. Thompson