تخفيضات ومواءمة الصورة

StackOverflow https://stackoverflow.com/questions/255170

  •  05-07-2019
  •  | 
  •  

سؤال

أقوم بعمل موقع ينشر مقالات في القضايا كل شهر. إنه أمر واضح ومباشر ، وأعتقد أنه باستخدام محرر تخفيض (مثل WMD واحد هنا في مكدس Overflow) سيكون مثاليًا.

لكن، إنهم بحاجة إلى القدرة على الحصول على صور محاذاة في فقرة معينة.

لا أستطيع رؤية طريقة للقيام بذلك مع النظام الحالي - هل هو ممكن؟

هل كانت مفيدة؟

المحلول

يمكنك تضمين HTML في Markdown ، حتى تتمكن من فعل شيء مثل هذا:

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

Continue markdown text...

نصائح أخرى

تدعم العديد من المعالجات "الإضافية" التي تدعم السمات. لذلك يمكنك تضمين اسم الفصل مثل SO (PHP Markdown Extra):

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

أو بدلاً من ذلك (Maruku ، كرامون, بيثون تخفيض):

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

ثم ، بالطبع ، يمكنك استخدام ورقة الأنماط بالطريقة الصحيحة:

.callout {
    float: right;
}

إذا كان لك يدعم هذا بناء الجملة ، فهو يمنحك أفضل ما في العالمين: لا يوجد علامات مضمنة ، وملخص ورقة أنماط بما يكفي لعدم الحاجة إلى تعديلها من قبل محرر المحتوى الخاص بك.

لقد وجدت حلاً لطيفًا في تخفيض نقي مع القليل 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;
}

تضمين CSS سيء:

![Flowers](/flowers.jpeg)

CSS في ملف آخر:

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

أحب أن أكون كسولًا فائقًا باستخدام الجداول لمحاذاة الصور مع الأنبوب العمودي (|) بناء الجملة. يتم دعم هذا من خلال بعض النكهات المبرمة (ويدعمها أيضًا الغزل والنسيج إذا كان ذلك يطفو قاربك):

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

أو

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

إنه ليس الحل الأكثر مرونة ، ولكنه جيد بالنسبة لمعظم احتياجاتي البسيطة ، من السهل القراءة بتنسيق تخفيض ، ولا تحتاج إلى تذكر أي CSS أو HTML الخام.

لديّ بديل للطرق أعلاه التي استخدمت علامة ALT ومحدد CSS على علامة ALT ... بدلاً من ذلك ، أضف علامة URL مثل هذا:

أولا رمز الصورة الخاص بك:

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

لاحظ عنوان URL المضافة #Center.

أضف الآن هذه القاعدة في CSS باستخدام محددات السمات CSS 3 لتحديد الصور مع مسار معين.

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

يجب أن تكون قادرًا على استخدام تجزئة عنوان URL مثل هذا تقريبًا مثل تحديد اسم الفصل وليس إساءة استخدام علامة Alt مثل بعض الأشخاص الذين علقوا حول هذا الحل. كما أنه لن يتطلب أي امتدادات إضافية. افعل واحدة من أجل تعويم اليمين واليسار أيضًا أو أي أنماط أخرى قد ترغب فيها.

حتى أنظف سيكون لوضع فقط p#given img { float: right } في ورقة الأنماط ، أو في <head> وملفوف في style العلامات. ثم ، ما عليك سوى استخدام التخفيض ![Alt text](/path/to/img.jpg).

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

السمة markdown احتمال داخل التخفيض.

أحببت تعلم إجابة من استخدام الجداول لأنها قابلة للقراءة تمامًا (وهو أحد الغرض من كتابة التخفيض).

ومع ذلك ، في حالة محلل تخفيف Gitbook ، اضطررت إلى ، بالإضافة إلى خط رأس فارغ ، إضافة خط فاصل تحته ، حتى يتم التعرف على الجدول وتقديمه بشكل صحيح:

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

تحتاج خطوط الفاصل إلى تضمين ثلاثة شرطات على الأقل --- .

إذا قمت بتنفيذها في بيثون ، فهناك امتداد يتيح لك إضافة أزواج مفتاح/قيمة 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. */
}

كما جريج قال يمكنك تضمين محتوى HTML في تخفيض التنقل ، ولكن إحدى نقاط التخفيضات هي تجنب الاضطرار إلى الحصول على معرفة 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 النقطة تخفيض السعر هل أنت لا تريد أن يدخل الأشخاص غير الفنيين في خصوصيات وعموميات CSS/HTML .. الأمر متروك لك كمطور ويب لجعل محتوى CSS الخاص بك يلف الصفحة عامة ونظيفة قدر الإمكان ، ولكن بعد ذلك ، ولكن مرة أخرى ، لا يحتاج المحررين إلى معرفة ذلك.

كان لدي نفس المهمة ، وقد قمت بمحاذاة صوري إلى اليمين بإضافة هذا:

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

أبسط هو لف الصورة في علامة مركزية ، مثل ...

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

يمكن اختبار أي شيء يتعلق بالتخفيض هنا - http://daringfireball.net/projects/markdown/dingus

بالتأكيد، <center> قد يتم إهماله ، لكنه بسيط ويعمل!

مرخصة بموجب: CC-BY-SA مع الإسناد
لا تنتمي إلى StackOverflow
scroll top