# مشكلة في عرض Markdown مع صورة محاطة بـ HTML
**URL:** https://meta.discourse.org/t/markdown-rendering-issue-with-image-surrounded-with-html/152801
**Category:** Bug
**Created:** [26 مايو 2020، 5:21م UTC](https://meta.discourse.org/t/markdown-rendering-issue-with-image-surrounded-with-html/152801 "2020-05-26T17:21:21Z")
**Posts on this page:** 20
**Page:** 1
### Author:  [@Arkshine](https://meta.discourse.org/u/Arkshine)
#### Post date: [26 مايو 2020، 5:21م UTC](https://meta.discourse.org/t/markdown-rendering-issue-with-image-surrounded-with-html/152801/1 "2020-05-26T17:21:21Z")
متعلق بـ [Thumbnail generation & markdown rendering issue](https://meta.discourse.org/t/thumbnail-generation-markdown-rendering-issue/152701)
عندما يقوم Discourse بتنزيل واستبدال صورة HTML ببناء جملة Markdown الخاص به — وفي سياقنا، ينتج عن ذلك:
```plaintext
[...][...]
```
لا يستطيع Discourse عرض الصورة
> **صورة**
>
> 
لحل المشكلة، تحتاج إلى سطر فارغ على الأقل في الأعلى:
```plaintext
[...]
[...]
```
> **صورة**
>
> 
هل من الممكن السماح بعرض صورة Markdown محاطة بـ HTML، من فضلك؟
@david
---
### Author:  [@david](https://meta.discourse.org/u/david)
#### Post date: [26 مايو 2020، 5:40م UTC](https://meta.discourse.org/t/markdown-rendering-issue-with-image-surrounded-with-html/152801/3 "2020-05-26T17:40:46Z")
دعنا نجرب هذا على ميتا. أنا أقوم بربط هذه الصورة مباشرة داخل رابط:
```plaintext
```
[](https://discourse.org)
دعنا نرى ما يحدث عند جلب الصورة…
---
### Author:  [@david](https://meta.discourse.org/u/david)
#### Post date: [26 مايو 2020، 5:44م UTC](https://meta.discourse.org/t/markdown-rendering-issue-with-image-surrounded-with-html/152801/4 "2020-05-26T17:44:01Z")
@Arkshine يبدو أن ذلك قد نجح على ما يرام - فقد تم عرض `` بنجاح.
هل يمكنك مشاركة المزيد من هيكل HTML المحيط بالرابط؟
---
### Author:  [@Arkshine](https://meta.discourse.org/u/Arkshine)
#### Post date: [26 مايو 2020، 5:47م UTC](https://meta.discourse.org/t/markdown-rendering-issue-with-image-surrounded-with-html/152801/5 "2020-05-26T17:47:57Z")
> **غير منسق**
>
> ```plaintext
>
نُشر في:
> سواء كنتم لاعبين أو مجرد موظفين تقضون يومكم جالسين والظهر يصرخ طلبًا لكرسي أفضل، إليكم عرضًا حصريًا آخر بسعر مغرٍ!
> كرسي ألعاب فاخر، سماعات ألعاب، وشحن سريع مجاني مع ضمان الوكيل الرسمي – فقط بـ 679 شيكل!!!
> استخدموا في الكاشير الكوبون الحصري – GLA679
> 
>
>
كرسي ألعاب احترافي SPARKFOX GC60P
>
> كرسي ألعاب بتصميم خاص لألعاب الكمبيوتر لضمان أقصى راحة للمستخدم
>
>
> - كرسي بظهر مرتفع
> - أقصى راحة لفترات لعب طويلة
> - وسادتان للدعم في الرقبة والظهر السفلي
> - نوع المادة: رغوة مصبوبة
> - نوع الإطار: معدن
> - المادة: جلد مع ألياف كربونية
> - مسند الذراعين: قابل للتعديل للأعلى/الأسفل
> - نوع الآلية: فراشة
> - نوع الرفع: هيدروليكي Class4
> - مدى ميل الظهر: 90°-180°
> - نوع القاعدة: نايلون
> - مادة العجلات: نايلون
> - القدرة على التحمل: حتى 150 كجم
> - الضمان: سنة
>
>
الأبعاد
>
>
> - العرض: 67 سم
> - العمق: 67 سم
> - الارتفاع المتغير: 124-132 سم
>
>
>
>
سماعات ألعاب SPARKFOX K1
>
سماعات ألعاب بتصميم خاص لأقصى راحة في الصوت والتحدث مع إلغاء ضوضاء الخلفية
>
>
> - قابلة للاستخدام مع معظم الأجهزة المتاحة في السوق
> - صوت وإدارة المكالمات على الهواتف وأجهزة الكمبيوتر المحمولة
> - مفتاح التحكم في مستوى الصوت موجود على كابل السماعة لسهولة الوصول
> - صوت ممتاز من وحدات تحكم كبيرة بحجم 50 ملم
> - أزرار التحكم في مستوى الصوت وكتم الصوت
> - كوب الأذن كبير ومبطّن لراحة قصوى
> - قوس السماعة قابل للتعديل ليتناسب تمامًا مع رأسك
> - يتصل مباشرة بمخرج سماعة 3.5 ملم
>
>
>
يُرفق محول خاص لربط السماعات بالكمبيوتر المكتبي عبر مقسم 3.5 ملم إلى مخرجين 3.5 ملم
>
>
>
>
> ```
> **منسق**
>
> ```plaintext
>
>
>
> نُشر في:
>
>
> 
>
> سواء كنتم لاعبين أو مجرد موظفين تقضون يومكم جالسين والظهر يصرخ طلبًا لكرسي أفضل، إليكم عرضًا حصريًا آخر بسعر مغرٍ!
> كرسي ألعاب فاخر، سماعات ألعاب، وشحن سريع مجاني مع ضمان الوكيل الرسمي – فقط بـ 679 شيكل!!!
>
> استخدموا في الكاشير الكوبون الحصري – GLA679
> 
>
>
كرسي ألعاب احترافي SPARKFOX GC60P
>
> كرسي ألعاب بتصميم خاص لألعاب الكمبيوتر لضمان أقصى راحة للمستخدم
>
>
> - كرسي بظهر مرتفع
> - أقصى راحة لفترات لعب طويلة
> - وسادتان للدعم في الرقبة والظهر السفلي
> - نوع المادة: رغوة مصبوبة
> - نوع الإطار: معدن
> - المادة: جلد مع ألياف كربونية
> - مسند الذراعين: قابل للتعديل للأعلى/الأسفل
> - نوع الآلية: فراشة
> - نوع الرفع: هيدروليكي Class4
> - مدى ميل الظهر: 90°-180°
> - نوع القاعدة: نايلون
> - مادة العجلات: نايلون
> - القدرة على التحمل: حتى 150 كجم
> - الضمان: سنة
>
>
الأبعاد
>
>
> - العرض: 67 سم
> - العمق: 67 سم
> - الارتفاع المتغير: 124-132 سم
>
>
>
>
سماعات ألعاب SPARKFOX K1
>
سماعات ألعاب بتصميم خاص لأقصى راحة في الصوت والتحدث مع إلغاء ضوضاء الخلفية
>
>
> - قابلة للاستخدام مع معظم الأجهزة المتاحة في السوق
> - صوت وإدارة المكالمات على الهواتف وأجهزة الكمبيوتر المحمولة
> - مفتاح التحكم في مستوى الصوت موجود على كابل السماعة لسهولة الوصول
> - صوت ممتاز من وحدات تحكم كبيرة بحجم 50 ملم
> - أزرار التحكم في مستوى الصوت وكتم الصوت
> - كوب الأذن كبير ومبطّن لراحة قصوى
> - قوس السماعة قابل للتعديل ليتناسب تمامًا مع رأسك
> - يتصل مباشرة بمخرج سماعة 3.5 ملم
>
>
>
يُرفق محول خاص لربط السماعات بالكمبيوتر المكتبي عبر مقسم 3.5 ملم إلى مخرجين 3.5 ملم
>
>
>
>
> ```
> **لقطة شاشة للمحرر**
>
> 
>
> 
---
### Author:  [@simon](https://meta.discourse.org/u/simon)
#### Post date: [26 مايو 2020، 5:51م UTC](https://meta.discourse.org/t/markdown-rendering-issue-with-image-surrounded-with-html/152801/6 "2020-05-26T17:51:19Z")
هذه هي نفس المشكلة التي تم طرحها هنا: [Images not publishing to Discourse in WP 5.3 - #6 by simon](https://meta.discourse.org/t/images-not-publishing-to-discourse-in-wp-5-3/133636/6?u=simon_cossar)
---
### Author:  [@david](https://meta.discourse.org/u/david)
#### Post date: [26 مايو 2020، 5:57م UTC](https://meta.discourse.org/t/markdown-rendering-issue-with-image-surrounded-with-html/152801/7 "2020-05-26T17:57:00Z")
أها! @simon هل سيؤدي ترقية إضافة ووردبريس إلى إصلاح المنشورات القديمة؟ أم فقط المنشورات الجديدة؟
---
### Author:  [@simon](https://meta.discourse.org/u/simon)
#### Post date: [26 مايو 2020، 5:59م UTC](https://meta.discourse.org/t/markdown-rendering-issue-with-image-surrounded-with-html/152801/8 "2020-05-26T17:59:26Z")
ينطبق الإصلاح فقط على المنشورات التي تُنشر باستخدام محرر بلوك في ووردبريس. سيصلح المنشورات القديمة إذا تم النقر على زر “تحديث موضوع ديسكورس” في ووردبريس. سيتطلب ذلك إجراءً يدويًا لكل منشور ما لم يكتب شخص ما سكريبتًا لتمرير المنشورات القديمة.
---
### Author:  [@david](https://meta.discourse.org/u/david)
#### Post date: [26 مايو 2020، 6:02م UTC](https://meta.discourse.org/t/markdown-rendering-issue-with-image-surrounded-with-html/152801/9 "2020-05-26T18:02:48Z")
لنجرّب هذا HTML:
```plaintext
```
---
### Author:  [@david](https://meta.discourse.org/u/david)
#### Post date: [26 مايو 2020، 6:17م UTC](https://meta.discourse.org/t/markdown-rendering-issue-with-image-surrounded-with-html/152801/10 "2020-05-26T18:17:50Z")
أعتقد أنه يجب إصلاح هذه المشكلة في Discourse أيضًا، وذلك في حالة نشر منشورات من خلال تكامل غير ووردبريس. للتلخيص:
1. نشرت `
`. هذا كود HTML صالح تمامًا.
2. قام `pull_hotlinked_images` بجلب الصورة واستبدال الوسم بـ `
`.
3. هذا لا يتم عرضه بشكل صحيح.
إذن هناك حلان محتملان هنا. إما:
- نقوم بإصلاح InlineUploads بحيث يضيف سطرًا فارغًا في الوسم. وهذا يتم عرضه بشكل صحيح:
```plaintext
```
أو
- نقوم بإصلاح محرك Markdown لعرض `
`. لاحظ أن هذا لا يتم عرضه في عرض Commonmark التوضيحي أيضًا.
@sam هل تعلم إذا كان هناك سبب مقصود لعدم عرض صور Markdown في نفس السطر مع ``؟
---
### Author:  [@sam](https://meta.discourse.org/u/sam)
#### Post date: [27 مايو 2020، 3:02ص UTC](https://meta.discourse.org/t/markdown-rendering-issue-with-image-surrounded-with-html/152801/11 "2020-05-27T03:02:12Z")
> [@david](#):
>
> هل تعرف ما إذا كان هناك سبب مقصود لعدم ظهور صور Markdown في نفس السطر مع ``؟
هذا جزء من مواصفة CommonMark
\*\*اختبار\*\*
```plaintext
**اختبار**
```
لا نرغب مطلقًا في الانحراف عن المواصفة هنا. أعتقد أننا سنصلح مشكلة الصور التي يتم ربطها مباشرة (hotlink images) للسماح بذلك عن طريق حقن سطرين جديدين في الحالات المشابهة. أظن أن هذا نادر نسبيًا وهو نوع من المشاكل التي نخلقها بأنفسنا.
---
### Author:  [@Arkshine](https://meta.discourse.org/u/Arkshine)
#### Post date: [27 مايو 2020، 1:19م UTC](https://meta.discourse.org/t/markdown-rendering-issue-with-image-surrounded-with-html/152801/12 "2020-05-27T13:19:02Z")
لا أعتقد أن هذا نادرًا، خاصةً عندما يكون Discourse مرتبطًا بأدوات شائعة مثل WP-Discourse أو أي أدوات تستخدم واجهة برمجة التطبيقات.
يرجى مراعاة إضافة سطر فارغ. لا يبدو أن هذا سيكون تغييرًا كاسرًا وسهل التنفيذ إلى حد كبير. 🙏
---
### Author:  [@david](https://meta.discourse.org/u/david)
#### Post date: [1 يونيو 2020، 11:00ص UTC](https://meta.discourse.org/t/markdown-rendering-issue-with-image-surrounded-with-html/152801/13 "2020-06-01T11:00:15Z")
@Arkshine لقد ناقشنا هذا الأمر كثيرًا داخليًا. الأمر الأهم بالنسبة لنا هو الحفاظ على سلامة المحتوى، لذا فمن المرجح ألا يتم تطبيق حل الفواصل الأسطر.
لكننا سنقوم بالتأكيد بشيء ما - فكون وظيفة pull\_hotlinked\_images تقوم بتدمير الصور أمر غير مقبول. نأمل في التوصل إلى حل قريبًا 👀
---
### Author:  [@simon](https://meta.discourse.org/u/simon)
#### Post date: [13 أغسطس 2020، 6:48م UTC](https://meta.discourse.org/t/markdown-rendering-issue-with-image-surrounded-with-html/152801/16 "2020-08-13T18:48:02Z")
حل بديل لهذه المشكلة هو منع Discourse من تحميل الصور عن بُعد. يمكن القيام بذلك بإضافة نطاق الصورة إلى إعداد الموقع “النطاقات المعطلة لتحميل الصور”. كما يمكن أيضًا منع Discourse من تحميل _جميع_ الصور عن بُعد عن طريق تعطيل إعداد الموقع “تحميل الصور عن بُعد إلى المحلي”. راجع [Fix broken images for posts created by the WP Discourse and RSS plugins](https://meta.discourse.org/t/fix-broken-images-for-posts-created-by-the-wp-discourse-and-rss-plugins/160773) للحصول على التفاصيل.
---
### Author:  [@Arkshine](https://meta.discourse.org/u/Arkshine)
#### Post date: [13 أغسطس 2020، 7:31م UTC](https://meta.discourse.org/t/markdown-rendering-issue-with-image-surrounded-with-html/152801/17 "2020-08-13T19:31:44Z")
في حالتنا، لا يمكننا ذلك لأننا نستخدم مكون الصورة المصغرة الرسمية للموضوع، والذي يتطلب صورة محلية. حللنا المشكلة بإضافة أسطر جديدة قبل أي `![]()
` في المحتوى قبل إنشاء الموضوع باستخدام WP-Discourse. هذا ليس حلاً مناسبًا للجميع، لكنه يعمل لدينا. من المؤسف قليلاً أن ديسكورد لا يدعم هذا الاستخدام القانوني.
لكن نعم، إذا لم تكن مقيدًا بإضافة أو مكون، أو إذا لم تتمكن من إصلاح المحتوى قبل إنشاء الموضوع، فهذا بالتأكيد حل بديل معقول.
---
### Author:  [@david](https://meta.discourse.org/u/david)
#### Post date: [13 أغسطس 2020، 7:35م UTC](https://meta.discourse.org/t/markdown-rendering-issue-with-image-surrounded-with-html/152801/18 "2020-08-13T19:35:39Z")
ما زلنا نخطط لإصلاح المشكلة. للأسف، إنها مشكلة عميقة نسبيًا في نظام تصيير لغة المارك داون الخاص بنا، وهو أمر معقد للإصلاح. لكننا سنصل إلى ذلك - نعتذر عن تأخرنا!
---
### Author:  [@simon](https://meta.discourse.org/u/simon)
#### Post date: [26 يناير 2021، 6:55م UTC](https://meta.discourse.org/t/markdown-rendering-issue-with-image-surrounded-with-html/152801/22 "2021-01-26T18:55:00Z")
أود فقط إضافة ملاحظة هنا بأن المشكلة تؤثر أيضًا على المنشورات التي تحتوي على صور تم إنشاؤها عبر إضافة Discourse RSS.
---
### Author:  [@simon](https://meta.discourse.org/u/simon)
#### Post date: [23 يونيو 2021، 7:46م UTC](https://meta.discourse.org/t/markdown-rendering-issue-with-image-surrounded-with-html/152801/23 "2021-06-23T19:46:51Z")
نعتذر عن تعدد المنشورات في هذا الموضوع، لكن المشكلة تؤثر أيضًا على الصور في المنشورات التي يتم إنشاؤها عبر إضافة Zendesk لدينا عند تفعيل إعداد “مزامنة التعليقات من Zendesk”. تكمن الصعوبة في هذه الحالة في أنه لا يمكن معرفة مصدر الصور مسبقًا، وبالتالي لن تعمل حيلة إضافة مصدر الصورة إلى إعداد “نطاقات تحميل الصور المعطلة”.
هل توجد طريقة لمنع تحميل الصور البعيدة إلى الجهاز المحلي إذا كانت وسم الصورة محاطة بوسوم HTML؟
---
### Author:  [@sam](https://meta.discourse.org/u/sam)
#### Post date: [23 يونيو 2021، 10:34م UTC](https://meta.discourse.org/t/markdown-rendering-issue-with-image-surrounded-with-html/152801/24 "2021-06-23T22:34:04Z")
> [@simon](#):
>
> هل توجد أي طريقة لمنع تحميل الصور البعيدة محليًا إذا كانت وسم الصورة مغلفًا بوسوم HTML؟
أخشى أن هذا غير ممكن على الإطلاق؛ فإذا قمنا بمثل هذا الإجراء، فسنتيح لأطراف ثالثة تتبع الاستخدام في المنتدى عن طريق حقن صورة تتبع. إن ميزة تحميل الصور البعيدة هي جزء من نظام الأمان.
بدلاً من ذلك، أعتقد أننا بحاجة إلى نظام “أذكى” يعمل بطريقة مشابهة للطريقة التي بنى بها @tgxworld خرائط الصور الخاصة بنا قبل بضع سنوات، نظام يعمل بشكل عكسي من HTML ويضمن استقرار التغيير من خلال إعادة الطهي. تغيير معقد للأسف.
---
### Author:  [@angus](https://meta.discourse.org/u/angus)
#### Post date: [11 أغسطس 2021، 2:19ص UTC](https://meta.discourse.org/t/markdown-rendering-issue-with-image-surrounded-with-html/152801/25 "2021-08-11T02:19:42Z")
هذه المشكلة قد ظهرت مرة أخرى
> [@Run-together markdown formatting mixed with html makes images not load](https://meta.discourse.org/t/run-together-markdown-formatting-mixed-with-html-makes-images-not-load/199445/11):
>
> I see, thanks for clarifying. Honestly, this is unlikely to change anytime soon for the [reasons discussed in the topic I linked above](https://meta.discourse.org/t/markdown-rendering-issue-with-image-surrounded-with-html/152801/13). For example The key thing for us is to maintain the integrity of the content, so the newline solution will probably not happen. The problem is that if you were to try and autocorrect for the issue you’re describing it would potentially create other issues. The current solution here is to add your wordpress domain to the disabled image download domains site se…
فقط أفكر بصوت عالٍ هنا، لكنني أتساءل عما إذا كان بإمكاننا تجاوز هذه المشكلة الصعبة (أي تحويل HTML إلى Markdown). للتذكير (لمساعدة التفكير في هذا الأمر)
1. يدعم Discourse استيراد HTML لإنشاء محتوى المنشورات (مثل HTML من [WP Discourse](https://github.com/discourse/wp-discourse)).
2. في بعض السياقات، يتوقع المستخدم الحفاظ على سلامة HTML الأصلي تمامًا.
3. تشمل “السلامة” هنا جانبين على الأقل:
4. قد يؤدي تحويل HTML إلى Markdown إلى مشاكل من النوع الأول من السلامة، ومع ذلك فهو ضروري حاليًا لضمان النوع الثاني من السلامة.
لذا، ربما تكون إحدى الطرق لمعالجة هذه المشكلة لبعض المنشورات المستوردة هي تخزين HTML المستورد مباشرة كمحتوى منشور مطبوخ، ودعم مهمة `pull_hotlinked_images` لتنزيل الصور في مثل هذا المحتوى دون تحويل `img` إلى Markdown.
نعم، وببساطة أكثر، ربما يدعم الكود تنزيل الصور المرتبطة مباشرة دون الحاجة إلى تحويل `img` إلى Markdown. بالنسبة لمثل هذه المنشورات، يمكنك [استبدال عنوان الصورة المنزلة في المحتوى المطبوخ بدلاً من النص الخام](https://github.com/discourse/discourse/blob/main/app/jobs/regular/pull_hotlinked_images.rb#L53).
---
### Author:  [@sam](https://meta.discourse.org/u/sam)
#### Post date: [11 أغسطس 2021، 3:50ص UTC](https://meta.discourse.org/t/markdown-rendering-issue-with-image-surrounded-with-html/152801/26 "2021-08-11T03:50:03Z")
المشكلة هي كيف ستقوم بتحرير المنشورات بهذه العلامة. سيكون المحرر في وضع HTML الخام، وستكون شريط الأدوات بأكمله معطّلًا، وما إلى ذلك.
[Next page](https://meta.discourse.org/t/markdown-rendering-issue-with-image-surrounded-with-html/152801.md?page=2)