मार्कडाउन और छवि संरेखण

Question

मैं एक ऐसी साइट बना रहा हूं जो हर महीने मुद्दों पर लेख प्रकाशित करती है। यह सीधा है, और मुझे लगता है कि मार्कडाउन एडिटर का उपयोग करना (जैसे स्टैक ओवरफ्लो में डब्ल्यूएमडी एक यहां) सही होगा।

हालांकि, उन्हें किसी दिए गए पैराग्राफ में छवियों को सही-संरेखित करने की क्षमता की आवश्यकता होती है ।

मुझे वर्तमान प्रणाली के साथ ऐसा करने का कोई रास्ता नहीं दिख रहा है - क्या यह संभव है?

Comments

केवल "मैं हर महीने मुद्दों में लेख प्रकाशित करने वाले गैर-लाभकारी साइट के साथ एक दोस्त की मदद कर रहा हूं" के बिना सवाल क्यों नहीं पूछें?

— जॅलार्डो

@ जैलगार्डो क्योंकि मैं यह स्पष्ट करना चाहता था कि मेरा सिस्टम पर पूरा नियंत्रण नहीं है, और न ही मेरे पास किसी भी प्रकार के समाधान को खरीदने की क्षमता है। मैं सहमत हूं कि मैं प्रश्न को अलग तरह से कह सकता था।

— जेडीजा

मार्कडाउन संपादकों के संबंध में, आप महान स्टैकेडिट का उपयोग कर सकते हैं ।io / editor# , इसमें लिखने के लिए बहुत बढ़िया है :)

— अब्देलहैडी

@ अब्देलहाड़ी अगर केवल 2008 में उपलब्ध थी :)

— जेडीजा

@iPython 4 साल बाद (2012) पूछे गए एक प्रश्न का डुप्लिकेट कैसे हो सकता है?

— जेडीजाजा

Answer 1

आप HTML को Markdown में एम्बेड कर सकते हैं, इसलिए आप ऐसा कुछ कर सकते हैं:

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

Continue markdown text...

Comments

इसे साफ करें और अनावश्यक रूप से स्ट्रिपनिग द्वारा मानकीकृत करें divऔर imgटैग में एक क्लोजिंग स्लैश को क्रमशः जोड़ दें , अर्थात `<img style =" float: right "src =" जो भी हो

— ।jpg

इसके बजाय divमैं spanइनलाइन इंडेंटिंग के लिए उपयोग करना पसंद करता हूं । पूर्ण पैराग्राफ केंद्रित करने के divलिए अच्छा है, या यहां तक ​​कि सरल है p।

— नेत्र

GitHub के एक: <img align = "right" src = "जो भी हो

— ।jpg

@MattDiPasquale समापन स्लैश आवश्यक नहीं हैं। यह एक्सएचटीएमएल है, HTML नहीं।

— CaptSaltyJack

मैं एक भूत ब्लॉग पोस्ट में एक छवि एम्बेड करने की कोशिश की; <div style = "float: right"> <img ...> </ div> का उपयोग करके छवि के चारों ओर निम्नलिखित पैराग्राफ को सही तरीके से प्रवाहित किया गया, जबकि <img style = "float: right" ...> पैराग्राफ और छवि डालें अगल-बगल के बक्सों में।

— मार्टिन डेमेलो

Answer 2

मैं थोड़ा सीएसएस 3 हैक के साथ शुद्ध Markdown में एक अच्छा समाधान मिला :-)

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

बाईं ओर या दाईं ओर सीएसएस 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;
}

Comments

CSS को MkDocs डायरेक्टरी में कहाँ रखा जाना चाहिए? @ यनदुरान

— इवान हुआंग

@ इवानहुआंग सुनिश्चित करें कि आप MkDocs प्रलेखन के अनुसार एक extra.css फ़ाइल जोड़ते हैं, और उस फ़ाइल में सीएसएस डालते हैं।

— यन दुरान

Answer 3

कई मार्कडाउन "अतिरिक्त" प्रोसेसर विशेषताओं का समर्थन करते हैं। तो आप एक वर्ग का नाम शामिल कर सकते हैं जैसे (PHP Markdown Extra):

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

या, वैकल्पिक रूप से (मारुकु, क्रामडाउन , पायथन मार्कडाउन ):

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

फिर, निश्चित रूप से, आप एक स्टाइलशीट का उचित तरीके से उपयोग कर सकते हैं:

.callout {
    float: right;
}

यदि आप इस वाक्यविन्यास का समर्थन करते हैं, तो यह आपको दोनों दुनियाओं में सर्वश्रेष्ठ देता है: कोई एम्बेडेड मार्कअप नहीं, और एक स्टाइलशीट एब्सट्रैक्ट जो आपके कंटेंट एडिटर द्वारा संशोधित करने की आवश्यकता नहीं है।

Comments

जब तक आप यह सब लिखते हैं: फूल {: .कॉलआउट} जैसा आपने लिखा हो सकता है <img src = "/ flowers.jpeg" class = "

— callout

मैं सहमत हूं, लेकिन मार्कडाउन अक्सर उन उपयोगकर्ताओं के लिए चुना जाता है जो * एमएल-साक्षर नहीं हैं, इसलिए किसी भी अन्य मध्यस्थ वाक्यविन्यास पर HTML को प्राथमिकता देने का कोई कारण नहीं है।

— gerwitz

("कोई कारण नहीं" निश्चित रूप से अधिक सरल है। ऐसे कई यूएक्स कारण हैं जिनसे आप अपने संपादकों को या तो अंतिम HTML रेंडरिंग से करीब या दूर जाना चाहते हैं। या आप अपनी सामग्री में एक HTML निर्भरता शुरू करने के लिए इच्छुक हो सकते हैं, यदि। '

— मार्कडाउन

Answer 4

मेरे पास उपरोक्त विधियों का एक विकल्प है जो Alt टैग और alt टैग पर एक CSS चयनकर्ता का उपयोग करता है ... इसके बजाय, इस तरह एक URL पृष्ठ जोड़ें:

पहले आपका मार्कडाउन इमेज कोड:

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

जोड़ा गया URL हैश # नोट करें।

अब CSS में इस नियम को CSS 3 विशेषता चयनकर्ताओं का उपयोग करके एक निश्चित पथ के साथ छवियों का चयन करें।

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

आपको एक URL हैश का उपयोग करने में सक्षम होना चाहिए जैसे कि एक वर्ग नाम को परिभाषित करना और यह ALT टैग का दुरुपयोग नहीं है जैसे कि कुछ लोगों ने उस समाधान के बारे में टिप्पणी की थी। इसके लिए किसी अतिरिक्त एक्सटेंशन की भी आवश्यकता नहीं होगी। फ्लोट के लिए एक दाएँ और बाएँ या किसी भी अन्य शैलियों को आप चाहते हैं।

Comments

ठीक वही जो मेरे द्वारा खोजा जा रहा था। आप एक जीवन रक्षक हैं। एक बात जो मैं जोड़ना चाहूंगा, वह `` h1 h2 {स्पष्ट: दोनों} `` `है ताकि अगली हेडिंग नई लाइन में शुरू हो (छवि के साथ ओवरलैप नहीं)

— bhar1red

जैसा मैं देख रहा हूँ, वैसा ही दिखता है ... मैं CSS कैसे बनाऊं? और मैं इसे मार्कडाउन में कैसे कहूं?

— टोनी डी

यह भी महान समाधान के रूप में मेरा है :)

— OzzyCeshop

@ ऑज़ीज़चेक - नहीं, वास्तव में, आपका समाधान छवि "ऑल्ट" टैग का दुरुपयोग करता है जो एक पृष्ठ पर पहुंच अनुपालन के लिए खराब हो सकता है, जहां यह समाधान src टैग के माध्यम से गैर-आक्रमण दृष्टिकोण का उपयोग करता है।

— कांप

Answer 5

सीएसएस एम्बेडिंग खराब है:

![Flowers](/flowers.jpeg)

सीएसएस एक और फाइल में:

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

Comments

क्या? अब अचानक आपको किसी बाहरी फ़ाइल को संपादित करने के लिए हर बार जब आप मार्कडाउन सामग्री बदलते हैं? मेरे लिए एक अच्छे समाधान की तरह नहीं है।

— जॉर्डन रीटर

@JordanReiter यहाँ हर किसी ने एक प्रोग्राम लिखा है जिसमें एक से अधिक फ़ाइल हैं जहाँ तर्क कई स्थानों पर फैला / व्यवस्थित है। हम इसे बनाए रखने के उद्देश्य से करते हैं। यह इतना दर्दनाक और बहुत अलग क्यों है?

— z5h

मार्कडाउन गैर-प्रोग्रामर उपयोगकर्ताओं को सामग्री बनाने देता है और इसे उन फ़ाइलों पर निर्भर नहीं होना चाहिए जिन्हें सर्वर तक सीधे पहुँचा और संपादित किया जाना है। एक और उदाहरण: मुझे लगता है कि किसी डेटाबेस में फ़ील्ड के नामों को अपने कोड में हार्ड-कोड करना पूरी तरह से सामान्य है लेकिन आपके डेटाबेस में फ़ील्ड के मान के आधार पर हार्ड-कोड में एक गलती (यानी if product.name == 'Tulips') क्योंकि आप पर निर्भर नहीं हो सकते मूल्य की स्थिरता। यह सब लेता है किसी को बदल रहा Flowersहै Flowerऔर अचानक उस छवि को देखने के बाहर चबूतरे। इसके अलावा, उन्हें हर बार आपको एक छवि जोड़ने के लिए कॉल करना होगा!

— जॉर्डन रीटर

@cboettig यह ऑल्ट टैग का गंभीर दुरुपयोग है। यह उन लोगों के लिए छवि का एक शाब्दिक विवरण माना जाता है जो छवि को नहीं देख सकते हैं।

— नाथन ग्रिग

मैं इस समाधान पर रो रहा हूं बहुत से लोग चकित हैं। यह एक सुंदर हैक है, कुछ होस्टिंग सेवाओं के लिए एक समस्या को हल करने के लिए आवश्यक है। इस खूबसूरत हैक को देने वाला पोस्टर अब चला गया है और इसके बजाय समुदाय को क्रायबी के साथ छोड़ दिया गया है।

— एरोन रॉबिन्सन

Answer 6

ऊर्ध्वाधर पाइप ( |) सिंटैक्स के साथ छवियों को संरेखित करने के लिए तालिकाओं का उपयोग करके मुझे सुपर आलसी होना पसंद है । यह कुछ मार्कडाउन फ्लेवर्स द्वारा समर्थित है (और टेक्सटाइल द्वारा समर्थित भी है यदि यह आपकी नाव को तैरता है):

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

या

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

यह सबसे अधिक लचीला समाधान नहीं है, लेकिन यह मेरी अधिकांश साधारण जरूरतों के लिए अच्छा है, मार्कडाउन प्रारूप में पढ़ना आसान है, और आपको किसी भी CSS या कच्चे HTML को याद रखने की आवश्यकता नहीं है।

Comments

मुझे यह शैली पसंद है, बहुत मार्केड-वाई। बहुत बुरा यह github पर काम नहीं करता है (वैसे भी अभी तक नहीं।)

— एलियट

मैंने अभी GitHub में इस सिंटैक्स की कोशिश की है और यह अब काम करता है।

— इगे रूबक

यह एक दिलचस्प हैक है, लेकिन यह लेआउट के लिए तालिकाओं का दुरुपयोग कर रहा है। 1999 में आपका स्वागत है।

— jxpx777

Github फ्लेवर्ड मार्कडाउन के लिए, के साथ एक लाइन जोड़ें |-|-|। यह पार्सर को बताता है कि एक टेबल है, और पहली पंक्ति हेडर है। Ex: goo.gl/xUCRiK

— कायला

Answer 7

यहां तक ​​कि क्लीनर को सिर्फ p#given img { float: right }स्टाइल शीट में, या टैग <head>में लपेटकर रखना होगा style। फिर, बस मार्कडाउन का उपयोग करें ![Alt text](/path/to/img.jpg)।

Answer 8

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

markdownमार्कडाउन के अंदर विशेषता संभावना।

Comments

मेरे लिए काम किया। मैं गितुब का उपयोग नहीं कर रहा हूं। धन्यवाद @ ट्रैक्स।

— ह्यूगो तावरस

माइकेल के वेनिला मार्काडाउन PHP पार्सर के साथ ठीक काम करता है

— रॉनन

यह मार्कडाउन अतिरिक्त कार्यक्षमता है, जो कुछ सामग्री प्रबंधन प्रणालियों (जैसे Drupal) में शामिल है, लेकिन मार्कडाउन प्रति se में कार्यक्षमता शामिल नहीं है।

— टिम

Answer 9

मुझे यह जानकर बहुत अच्छा लगा तालिकाओं के उपयोग के बारे में क्योंकि यह काफी पठनीय है (जो लिखने का एक उद्देश्य है)।

हालाँकि, GitBook के मार्कडाउन पार्सर के मामले में, मुझे एक खाली हेडर लाइन के अलावा, इसके तहत एक विभाजक रेखा जोड़नी होगी, जिस तालिका को पहचाना जाना चाहिए और ठीक से प्रस्तुत किया जाना चाहिए:

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

विभाजक लाइनों को कम से कम तीन डैश शामिल करने की आवश्यकता है ---।

Answer 10

यदि आप इसे पायथन में लागू करते हैं, तो एक एक्सटेंशन है जो आपको HTML कुंजी / मूल्य जोड़े, और वर्ग / आईडी लेबल जोड़ने देता है। इसके लिए वाक्य रचना है:

![A picture of a cat](cat.png){: style="float:right"}

या, अगर एम्बेडेड स्टाइल आपकी नाव को तैरता नहीं है,

![A picture of a cat](cat.png){: .floatright}

इसी स्टाइलशीट के साथ stylish.css:

.floatright {
    float: right;
    /* etc. */
}

Answer 11

जैसा कि greg ने कहा कि आप HTML सामग्री को Markdown में एम्बेड कर सकते हैं, लेकिन Markdown के बिंदुओं में से एक व्यापक (या किसी भी, उस मामले के लिए) से बचने के लिए है CSS / HTML मार्कअप ज्ञान, सही? मैं यह करता हूं:

मेरी मार्कडाउन फ़ाइल में मैं अपने सभी विकी संपादकों को निर्देश देता हूं कि वे सभी छवियों को कुछ इस तरह से देखें।

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

(बेशक .. वे नहीं जानते कि क्या <div>मतलब है, लेकिन यह बात नहीं होनी चाहिए)

तो मार्कडाउन फाइल इस तरह दिखती है:

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

[1]: /image/path

और सीएसएस सामग्री में जो पूरे पृष्ठ को लपेटता है मैं छवि टैग के साथ जो कुछ भी चाहता हूं वह कर सकता हूं:

img {
   float: right;
}

बेशक आप (इस विशेष मामले में, लपेटकर सीएसएस सामग्री के साथ कुछ कर सकते हैं ... imgdiv रोकता छवि के खिलाफ रैपिंग से अन्य पाठ के साथ टैग ... यह, सिर्फ एक उदाहरण है, हालांकि), लेकिन IMHO की बात Markdown यह है कि आप सीएसएस / एचटीएमएल के भीतर और बाहर होने वाले संभावित गैर-तकनीकी लोगों को नहीं चाहते हैं .. यह आपके लिए एक वेब डेवलपर के रूप में है कि आप अपने सीएसएस सामग्री को बना सकते हैं जो पृष्ठ को सामान्य और स्वच्छ के रूप में लपेटता है, लेकिन फिर फिर से आपके संपादकों को इसके बारे में जानने की जरूरत नहीं है।

Answer 12

मेरा एक ही काम था, और मैंने इसे जोड़कर अपनी छवियों को दाईं ओर संरेखित किया:

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

Comments

मैं यह कोशिश की, लेकिन यह अब काम कर रहा है .. छवि गठबंधन है, लेकिन HTML पाठ प्रदर्शित करता है।

— फ़िज़ा खान

Answer 13

यह काम मेरे लिए

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

Answer 14

सरलतम छवि को केंद्र टैग में लपेटना है, जैसे ...

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

मार्कडाउन के साथ कुछ भी करने के लिए यहां परीक्षण किया जा सकता है - http://daringfireball.net/projects/markdown/dingus

यकीन है, <center>पदावनत किया जा सकता है, लेकिन यह आसान है और यह काम करता है!

Comments

बस ओपी ने सही संरेखण के लिए पूछा - जब मैं इस उत्तर पर ठोकर खाई तो मैं एक छवि को केंद्रित करने की कोशिश कर रहा था।

— योयो

नहीं, कभी उपयोग न करें center।

— जॉर्डन राइटर

मैं वास्तव में @ yoyo के साथ जा रहा हूँ - <center>समझ में आता है। यह HTML से पदावनत है क्योंकि HTML केवल सामग्री का वर्णन करने वाला है; शैलियाँ शैलियों में होनी चाहिए। हालांकि, मार्कडाउन का एक अलग इरादा है: एक पाठ संदेश को व्यक्त करने के लिए आवश्यक पर्याप्त स्टाइल शामिल करना, और बाकी को रेंडरर की साइट पर छोड़ दें। <center>सीएसएस के बारे में सोचने की तुलना में बहुत अधिक स्वाभाविक लगता है width, floatएस, margin... - मैं भी जहाँ तक एक मार्कडाउन पार्सर <center>उपयुक्त सीएसएस समर्थित तत्वों के साथ टैग की जगह है , बहुत पसंद है कि यह कैसे वर्तमान में समझदारी से पैराग्राफ का आंकड़ा है।

— स्लिप डी। थॉम्पसन