মার্কডাউন এবং চিত্র প্রান্তিককরণ

Question

আমি এমন একটি সাইট তৈরি করছি যা প্রতিমাসে নিবন্ধগুলি প্রকাশ করে। এটা সহজবোধ্য, এবং আমি একটি Markdown এডিটর (মত ব্যবহার মনে WMD এক স্ট্যাক ওভারফ্লো এখানে) নিখুঁত হতে হবে।

যাইহোক, তাদের কোনও নির্দিষ্ট অনুচ্ছেদে চিত্রগুলি ডান-প্রান্তিককরণ করার দক্ষতার প্রয়োজন নেই ।

আমি বর্তমান সিস্টেমের সাথে এটি করার কোনও উপায় দেখতে পাচ্ছি না - এটি কি সম্ভব?

Comments

"আমি প্রতি মাসে ইস্যুতে নিবন্ধগুলি প্রকাশ করে এমন একটি অলাভজনক সাইটের সাথে একটি বন্ধুকে সাহায্য করছি" ছাড়া কেবল প্রশ্নটি কেন করবেন না?

— জেগালার্ডো

@ জেগালার্ডো যেহেতু আমি এটি পরিষ্কার করতে চেয়েছিলাম যে সিস্টেমের উপরে আমার সম্পূর্ণ নিয়ন্ত্রণ নেই, না কোনও ধরণের সমাধান কেনার ক্ষমতা আমারও ছিল না। আমি সম্মত যে আমি প্রশ্নটি আলাদাভাবে বানিয়ে ফেলতে পারতাম।

— Jedidja

Markdown সম্পাদকদের সম্বন্ধে আপনি মহান ব্যবহার করতে পারেন stackedit.io/editor# , এটা মধ্যে :) লিখতে সন্ত্রস্ত

— AbdelHady

@ আবদেল হ্যাডি যদি এটি ২০০৮-এ পাওয়া

— যেত

@iPython ২০০৮ সালের প্রশ্নটি কীভাবে 4 বছর পরে (2012) জিজ্ঞাসা করা কোনও প্রশ্নের সদৃশ হতে পারে?

— জেদিদজা

Answer 1

আপনি মার্কডাউন এ এইচটিএমএল এম্বেড করতে পারেন, যাতে আপনি এর মতো কিছু করতে পারেন:

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

Continue markdown text...

Comments

এটা পরিষ্কার আপ ও অপ্রয়োজনীয় strippnig দ্বারা প্রমিত divএবং একটি ক্লোজিং স্ল্যাশ যোগ img, অর্থাত্ `<চিত্র শৈলী =" ভাসা: ডান "src =" whatever.jpg "/> ট্যাগ, যথাক্রমে

— ma11hew28

পরিবর্তে divআমি spanইনলাইন ইনডেন্টিংয়ের জন্য ব্যবহার করতে পছন্দ করি । পূর্ণ অনুচ্ছেদের জন্য কেন্দ্রীকরণ divভাল, বা এমনকি সহজ p।

— চোখ

গিটহাবের মতো কিছু স্যানিটাইজড দোভাষীর সাথে এটি আরও ভাল কাজ করে: <img align = "ডান" src = "যাইহোক

— jjpg

@ ম্যাটডিপিপাস্কোলে বন্ধ স্ল্যাশগুলি প্রয়োজনীয় নয়। এটি এক্সএইচটিএমএল, এইচটিএমএল নয়।

— ক্যাপ্টসালটিজ্যাক

আমি এটি একটি ভুত ব্লগ পোস্টে একটি চিত্র এম্বেড করার চেষ্টা করেছি; <div style = "float: right"> <img ...> </div> নীচের অনুচ্ছেদে চিত্রের চারপাশে সঠিকভাবে প্রবাহিত হয়েছে, যেখানে <img শৈলী = "ভাসা: ডান" ...> অনুচ্ছেদে এবং চিত্রটি রেখেছেন পাশাপাশি পাশের বাক্সে।

— মার্টিন ডিমেলো

Answer 2

আমি একটি সামান্য সিএসএস 3 সাথে খাঁটি মার্কডাউনে একটি দুর্দান্ত সমাধান পেয়েছি: হ্যাক :-)

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

MkDocs ডিরেক্টরিতে CSS কোথায় রাখা উচিত? @ ইয়ানডুরান

— ইভান হুয়াং

@ ইভানহুয়াং কেবল নিশ্চিত করে নিন যে আপনি এমকেডক্স ডকুমেন্টেশন অনুসারে একটি অতিরিক্ত সিএসএস ফাইল যুক্ত করেছেন এবং সেই ফাইলটিতে সিএসএস রেখেছেন।

— ইয়ান ডুরান

Answer 3

অনেক মার্কডাউন "অতিরিক্ত" প্রসেসর বৈশিষ্ট্যগুলি সমর্থন করে। সুতরাং আপনি এর মতো শ্রেণীর নাম অন্তর্ভুক্ত করতে পারেন (পিএইচপি মার্কডাউন অতিরিক্ত):

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

বা, বিকল্পভাবে (মারুকু, ক্র্যামডাউন , পাইথন মার্কডাউন ):

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

তারপরে অবশ্যই আপনি স্টাইলশিটটি সঠিক উপায়ে ব্যবহার করতে পারেন:

.callout {
    float: right;
}

যদি আপনার এই বাক্য গঠনটিকে সমর্থন করে তবে এটি আপনাকে উভয় বিশ্বের সেরা দেয়: এম্বেডড মার্কআপ নেই, এবং আপনার সামগ্রী সম্পাদক দ্বারা সংশোধন করার দরকার নেই এমন একটি স্টাইলশীট যথেষ্ট।

Comments

এতক্ষণে আপনি এই সমস্ত লিখুন:! ফুল {: .ক্যালআউট} আপনি পাশাপাশি <img src = "/ ফুল.জপেগ" ক্লাস = "কলআউট" />

— lfalin

আমি সম্মত, তবে মার্কডাউন প্রায়শই এমন ব্যবহারকারীদের জন্য বেছে নেওয়া হয় যা * এমএল-সাক্ষরিত নয় তাই অন্য কোনও স্বেচ্ছাসেবী সিনট্যাক্সের চেয়ে এইচটিএমএলকে প্রাধান্য দেওয়ার কোনও কারণ নেই।

— জার্মুইটজ

("কোনও কারণ নেই" অবশ্যই খুব বেশি সরলকরণ করছে There অনেকগুলি ইউএক্স কারণ রয়েছে যা আপনি চাইছেন আপনার সম্পাদকরা চূড়ান্ত এইচটিএমএল রেন্ডারিং থেকে আরও কাছাকাছি বা আরও বেশি কাছাকাছি চলে আসতে পারেন Or বা আপনি যদি আপনার সামগ্রীতে এইচটিএমএল নির্ভরতা প্রবর্তন করতে বিরত হন, যদি আপনি 'রেন্ডারিং কৌশলটি বিমূর্ত করার জন্য

— মার্কডাউন

Answer 4

আমার উপরের পদ্ধতিগুলির বিকল্প রয়েছে যা ALT ট্যাগ এবং Alt ট্যাগটিতে একটি সিএসএস নির্বাচক ব্যবহার করেছিল ... পরিবর্তে, এর মতো একটি URL হ্যাশ যুক্ত করুন:

প্রথমে আপনার মার্কডাউন চিত্র কোড:

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

যুক্ত হওয়া ইউআরএল হ্যাশ # সেন্টার নোট করুন।

এখন সিএসএসে এই নিয়মটি সিএসএস 3 ব্যবহার করে নির্দিষ্ট পাথ সহ চিত্র নির্বাচন করতে বৈশিষ্ট্য নির্বাচনকারী নির্বাচন করুন।

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

আপনার যেমন কোনও ইউআরএল হ্যাশ ব্যবহার করতে সক্ষম হওয়া উচিত প্রায় কোনও শ্রেণীর নাম সংজ্ঞায়িত করার মতো এবং এটি ALT ট্যাগের অপব্যবহার নয় যেমন কিছু লোক সেই সমাধান সম্পর্কে মন্তব্য করেছিলেন। এটি কোনও অতিরিক্ত এক্সটেনশন প্রয়োজন হবে না। ডান এবং বাম পাশাপাশি বা অন্য যে কোনও শৈলীতে আপনি চান এটি করতে পারেন।

Comments

ঠিক আমি খুঁজছেন ছিল কি. আপনি একটি জীবন রক্ষাকারী। আমি যে জিনিসটি যুক্ত করতে চাই তা হ'ল `` `h1 h2 {পরিষ্কার: উভয়ই}` `` যাতে পরবর্তী শিরোনামটি নতুন লাইনে শুরু হয় (চিত্রের সাথে ওভারল্যাপ হয় না)

— bhar1red

আমি যা খুঁজছি তা দেখে মনে হচ্ছে তবে ... আমি কীভাবে সিএসএস করব? এবং আমি কীভাবে এটি মার্কডাউনে কল করব?

— টনি ডি

এটি আমার মতো একই দুর্দান্ত সমাধান :)

— ওজিচেক

@ ওজিচেক - আসলেই নয়, আপনার সমাধানটি চিত্রটির "Alt" ট্যাগটিকে অপব্যবহার করে যা কোনও পৃষ্ঠায় অ্যাক্সেসযোগ্যতার সম্মতির জন্য খারাপ হতে পারে, যেখানে এই সমাধানটি এসআরসি ট্যাগের মাধ্যমে আক্রমণ-বহির্ভূত পদ্ধতির ব্যবহার করে।

— কাঁপানো

Answer 5

এম্বেড করা সিএসএস খারাপ:

![Flowers](/flowers.jpeg)

অন্য ফাইলে সিএসএস:

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

Comments

কি? এখন হঠাৎ করেই আপনি যখনই মার্কডাউন সামগ্রীটি পরিবর্তন করবেন তখন আপনাকে কোনও বাহ্যিক ফাইল সম্পাদনা করতে হবে? আমার কাছে ভাল সমাধানের মতো শোনাচ্ছে না।

— জর্ডান রিটার

@ জর্দানআরাইটার প্রত্যেকে এখানে একাধিক ফাইলের সমন্বয়ে একটি প্রোগ্রাম লিখেছেন যেখানে অনেক লোকেশনে যুক্তি ছড়িয়ে / সংগঠিত হয়। আমরা এটি রক্ষণাবেক্ষণের উদ্দেশ্যে উদ্দেশ্য করে করি। কেন এটি এত বেদনাদায়ক এবং ভয়ানক পৃথক?

— z5h

মার্কডাউন নন-প্রোগ্রামার ব্যবহারকারীদের সামগ্রী তৈরি করতে দেয় এবং এটি সরাসরি সার্ভারে অ্যাক্সেস এবং সম্পাদনা করতে হবে এমন ফাইলগুলির উপর নির্ভর করা উচিত নয়। অন্য একটি উদাহরণ: আমি মনে করি আপনার কোডে একটি ডাটাবেসের ক্ষেত্রের নামগুলি হার্ড-কোড করা সম্পূর্ণ স্বাভাবিক তবে আপনার ডাটাবেসে কোনও ক্ষেত্রের মান (উদাহরণস্বরূপ if product.name == 'Tulips') এর উপর ভিত্তি করে হার্ড-কোড করা ভুল কারণ আপনি নির্ভর করতে পারবেন না মান স্থায়িত্ব। সমস্ত নেয় কেউ পরিবর্তন Flowersকরতে Flowerএবং হঠাৎ যে ইমেজ দৃশ্য থেকে পপ আপ। এছাড়াও, প্রতিবার কোনও চিত্র যুক্ত করার সময় তাদের আপনাকে কল করতে হবে!

— জর্ডান রিয়েটার

@ cboettig এটি Alt ট্যাগটির মারাত্মক অপব্যবহার। এটি এমন লোকদের জন্য যা চিত্রটি দেখতে পারে না তাদের কাছে এটি একটি পাঠ্যের বিবরণ বলে মনে করা হচ্ছে।

— নাথান গ্রিগ

আমি অবাক হয়েছি এত লোকেরা এই সমাধানটির জন্য কাঁদছে। এটি একটি সুন্দর হ্যাক, নির্দিষ্ট হোস্টিং পরিষেবার জন্য সমস্যা সমাধানের জন্য প্রয়োজনীয়। এই সুন্দর হ্যাকটি দেওয়া পোস্টারটি এখন চলে গেছে এবং পরিবর্তে সম্প্রদায়টি কাঁদিয়েছে।

— অ্যারন রবিনসন

Answer 6

উল্লম্ব পাইপ ( |) সিনট্যাক্সের সাহায্যে চিত্রগুলি সারিবদ্ধ করতে আমি টেবিলগুলি ব্যবহার করে সুপার অলস হতে চাই । এটি কিছু মার্কডাউন স্বাদ দ্বারা সমর্থিত (এবং এটি টেক্সটাইল দ্বারা সমর্থিত যদি এটি আপনার নৌকাকে ভাসিয়ে দেয়):

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

অথবা

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

এটি সর্বাধিক নমনীয় সমাধান নয়, তবে এটি আমার বেশিরভাগ সাধারণ প্রয়োজনের জন্য ভাল, মার্কডাউন ফর্ম্যাটে পড়া সহজ, এবং আপনার কোনও সিএসএস বা কাঁচা এইচটিএমএল মনে রাখার দরকার নেই।

Comments

আমি এই স্টাইলটি পছন্দ করি, খুব মার্কডাউন- y। খুব খারাপ এটি গিথুবটিতে কাজ করে না (এখনও যাই হোক না))

— এলিয়ট

আমি এই সিনট্যাক্সটি কেবল গিটহাব-এ চেষ্টা করেছি এবং এটি এখন কাজ করে বলে মনে হচ্ছে।

— ইজ রুবাক

এটি একটি আকর্ষণীয় হ্যাক, তবে এটি বিন্যাসের জন্য টেবিলগুলির অপব্যবহার করছে।

— 1999- এ

গিথুব স্বাদযুক্ত মার্কডাউনয়ের জন্য, একটি লাইন যুক্ত করুন |-|-|। এটি পার্সারকে বলে যে একটি টেবিল রয়েছে এবং প্রথম লাইনটি শিরোনাম। উদাঃ 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

আমার কাছে কাজ করেছেন আমি গিথুব ব্যবহার করছি না। ধন্যবাদ @ ইরফক্স।

— হুগো টাভারেস

মিশেলফের ভ্যানিলা মার্কডাউন পিএইচপি পার্সারের সাথে দুর্দান্ত কাজ করে

— রোনান

এটি মার্কডাউন অতিরিক্ত কার্যকারিতা যা কিছু বিষয়বস্তু পরিচালন ব্যবস্থায় (যেমন দ্রুপাল) অন্তর্ভুক্ত থাকে তবে মার্ক ডাউন ডাউন এ কার্যকারিতা অন্তর্ভুক্ত করে না।

— টিম

Answer 9

আমি শেখার উত্তরটি পছন্দ করেছি টেবিলগুলি ব্যবহারের বিষয়ে কারণ এটি যথেষ্ট পঠনযোগ্য (যা লেখার একটি উদ্দেশ্য)।

যাইহোক, গিটবুকের মার্কডাউন পার্সারের ক্ষেত্রে সারণিটি স্বীকৃত এবং সঠিকভাবে উপস্থাপনের জন্য আমাকে খালি শিরোনাম লাইন ছাড়াও এর নিচে একটি বিভাজক লাইন যুক্ত করতে হয়েছিল:

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

পৃথককারী রেখাগুলিতে কমপক্ষে তিনটি ড্যাশ অন্তর্ভুক্ত করা দরকার ---।

Answer 10

আপনি যদি পাইথনে এটি প্রয়োগ করেন তবে একটি এক্সটেনশন রয়েছে যা আপনাকে এইচটিএমএল কী / মান জোড় এবং শ্রেণি / আইডি লেবেল যুক্ত করতে দেয়। এর বাক্য গঠনটি হ'ল:

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

হিসাবে গ্রেগ বলেন আপনি HTML বিষয়বস্তু এম্বেড করতে পারেন তবে মার্কডাউনের একটি বিষয় হ'ল সিএসএস / এইচটিএমএল মার্কআপ জ্ঞান থাকতে হবে, তাই না? এই আমি কি কি:

আমার মার্কডাউন ফাইলে আমি আমার সমস্ত উইকি সম্পাদককে সমস্ত চিত্রকে এমন দেখায় যা মোছার জন্য এম্বেড করার নির্দেশ দেয়:

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

(অবশ্যই .. তারা কি জানে না <div> অর্থ , তবে এটির কোনও ব্যাপার নয়)

সুতরাং মার্কডাউন ফাইলটি দেখতে এমন দেখাচ্ছে:

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

[1]: /image/path

এবং সিএসএস সামগ্রীতে যা পুরো পৃষ্ঠাটি মুড়িয়ে দেয় আমি ইমেজ ট্যাগ দিয়ে যা করতে চাই তা করতে পারি:

img {
   float: right;
}

অবশ্যই আপনি (এই বিশেষ ক্ষেত্রে, মোড়কে সিএসএস কন্টেন্ট সঙ্গে আরও অনেক কিছু করতে পারেন ... imgDIV আছে প্রতিরোধ ইমেজ বিরুদ্ধে মোড়ানো থেকে অন্য পাঠ্য সহ ট্যাগটি ... এই, শুধু একটি উদাহরণ যদিও), কিন্তু এই প্রোগ্রামটিতে বিন্দু 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

আমি এটি চেষ্টা করেছিলাম তবে এটি এখন কাজ করছে .. চিত্রটি সারিবদ্ধ তবে এইচটিএমএল পাঠ্য প্রদর্শন করে।

— ফিজা খান

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://deringfireball.net/projects/markdown/dingus

অবশ্যই, <center>হ্রাস করা যেতে পারে, তবে এটি সহজ এবং এটি কার্যকর!

Comments

সবেমাত্র খেয়াল করা হয়েছে যে ওপি ডান সারিবদ্ধতা চেয়েছিল - আমি যখন এই উত্তরে হোঁচট খেয়েছি তখন আমি একটি চিত্র কেন্দ্র করার চেষ্টা করছিলাম।

— yoyo

না, কখনও ব্যবহার করবেন না center।

— জর্ডান রিয়েটার

আমি @ yoyo— এর সাথে আসলেই যাচ্ছি যার <center>মানে নেই। এটি এইচটিএমএল থেকে অবহেলিত হয়েছে কারণ এইচটিএমএল কেবলমাত্র সামগ্রীটি বর্ণনা করার কথা; শৈলীগুলি স্টাইলশিটে থাকতে হবে। যাইহোক, মার্কডাউনটির একটি ভিন্ন উদ্দেশ্য রয়েছে: একটি পাঠ্য বার্তা দেওয়ার জন্য প্রয়োজনীয় স্টাইলিং অন্তর্ভুক্ত করা এবং বাকিটি রেন্ডার / সাইটটিতে রেখে। <center>সিএসএস width, floatএস, marginএস সম্পর্কে চিন্তা করার চেয়ে অনেক বেশি প্রাকৃতিক বলে মনে হচ্ছে - আমি এমনকি মার্কডাউন পার্সারকে <center>যথাযথ সিএসএস-সমর্থিত উপাদানগুলির সাথে ট্যাগগুলি প্রতিস্থাপন করার পরেও চলে যাচ্ছিলাম, যেমন এটি বর্তমানে বুদ্ধিমানভাবে অনুচ্ছেদগুলি কীভাবে নির্ধারণ করে।

— স্লিপ ডি থম্পসন