42

مُحرر - محرر Markdown بسيط يدعم RTL ويُراعي اتجاه الشِفرات البرمجية

هذه تجربة مني لتوفير مُحرر Markodwn يدعم اللغة العربية لكن أيضا يُراعي كتابة الشفرات البرمجية ويتركها LTR وقت الكتابة، هذا الإصدار تجريبي...

لتجربة المحرر:

http://01walid.github.io/mu...

الكود المصدري:

مساهماتكم مُرحب بها

يرجى الدخول لحسابك أو تسجيل حساب لتستطيع إضافة تعليق
حساب جديد دخول

التعليقات

1
bitsnaps أضف ردا

السلام عليكم،

عمل ممتاز وليد، بالنسبة لي أفضل prismjs.com عوض CodeMirror استخدمته في أحد المشاريع بدا لي أصغر/أخف، طبعا لايهم ما الذي استخدمته، المهم الفكرة.

ممكن نعرف كمن من الوقت استغرق منك؟

1
01walid أضف ردا

وعليكم السلام،

prismjs مُجرد Syntax Highlighter وليس عبارة عن مُحرر

ﻷقرب لك الفكرة، فـ CodeMirror أشبه بـِ CKEditor, tinyMCE وغيرهم لكن مُوجه أساسيا ليكون محرر شفرات برمجية على المتصفح، لديه واجهة برمجية غنية تسمح بتخصيص وإضافة دعم لغات وأدوات تحرير.

أقرب منافس له هو Ace Editor لكنه لا يدعم RTL بشكل جيد بعد تجريبي له، ولديه مشاكل مع تحركات المؤشر (cursor movement) لما يكون الوضع RTL.

CodeMirror لديه دعم جيد، وهو مستعمل من طرف الكثير من المحررات والشركات، أنظر هنا:

بالنسبة للوقت المستغرق، فبالساعات استغرق مني الأمر حوالي 5 ساعات متقطعة ذهبت معظمها في البحث والتجريب حيث أن CodeMirror في وضعه الحالي لا يدعم جيدا RTL واضررت لاستخدام Branch آخر باسم direction على مستودعهم (لم يتم دمجه بعد) ﻷخرج بهذا.

0
bitsnaps أضف ردا

بالفعل، كنت سأستدرك لأنني استخدمت prism.js لعرض الشيفرة، و CodeMirror لكتابتها في مشروعي (سأعرضه لاحقا)

بالتوفيق.

0
forra أضف ردا

عمل رائع (y)

ولكن لماذا لا يتم استخدام bbcode ? يعني مثل محرر منتديات و لكن خفيف ذو UX/UI جيدة ؟

ما كنت افكر فيه هو ان اعمل محرر نصوص يعمل على متصفح.

لكن للاسف لم افهم بعد كيف تعمل خاصية Syntax Highlighter

انا لا اريد ان استخدم اي اضافات بل اريد ان افهم و ابرمج كل شئ لوحدي مثلا CodeMirror وجدت نفسي امام الاف اسطر فقط الصق بدون اي فهم للاسف

0
01walid أضف ردا

شكرا،

الهدف هو توفير محرر Markdown نظرًا لبساطة اللغة وانتشارها ودعمها الجيد

هناك الكثير من parsers التي تعنى بالماركداون والتي تسمح لك بتحويل الناتج إلى html أو pdf، كما أنها أصبحت تُستخدم في تحرير الكتب خاصة البرمجية منها، وهي مستخدمة في مواقع كثيرة مألوفة لدينا كلغة تنسيق المواضيع والتعليقات مثل StackOverflow, github .. الخ

bbcode تقتصر على المنتديات فقط أو تقريبا، كما أنها بالمقرانة مع Markdown فهي لغة ثرثارة (verbose) أي تحتاج إلى [bb] فاتحة وأخرى [bb/] غالقة في كثير من التنسيقات، في حين يكاد يكون تنسيق ماركدوان يبدو بديهيا..

0
forra أضف ردا

نعم ولكن ما اتحدث انا عنه مثلا لتجعل النص bold كل ما تحتاجه هو تحديد النص و اختيار زر bold من قائمة يعني مثل محرر وردبريس او وورد.

و لكن بسيط.

2
ahmedsaoud31 أضف ردا

يُمكن إضافة الرموز المرئية لسهولة التعامل مع أوامر الـ Markdown من خلال تظليل النص والضغط على أحد الرموز على حسب المُهمة هذا كود بسيط لتنفيذ تلك المهمة:

function reStyle(element, start, end){
    var text = element.value;
    var txtToAdd = start + text.substring(element.selectionStart, element.selectionEnd) + end;
    element.value = text.substring(0, element.selectionStart) + txtToAdd + text.substring(element.selectionEnd);
}

على سبيل المثال تريد جعل الخط سميك ستسخدم الدالة بالشكل:

reStyle(element, '**', '**');
0
ahmad777 أضف ردا

خارج الموضوع :

كيف يمكن الحصول على موقع مثل 01walid.github.io لتنفذ عليه مشاريعك الموجودة على الـGithub ؟

هل تحتاج لدفع شيء ؟

والإستضافة على الـGithub صحيح ؟

3
01walid أضف ردا

لا تحتاج لدفع أي شيء، ونعم الاستضافة على github

هناك نوعين من المواقع:

  • موقع user أو organization 

  • موقع لمشروع معين project site

ستحصل على نطاق فرعي خاص بك بشكل افتراضي من نوع

username.github.io

ولكل مشروع:

username.github.io/project-name

يكفي فقط انشاء فرع (branch) جديد في المستودع الذي تريد أن يكون لديه موقع خاص به، الفرع يكون باسم gh-pages ثم تدفع هناك صفحات الموقع

كل شيء مشروح هنا:

0
tamiromara أضف ردا

جهد جميل

0
abukamel أضف ردا

متي يمكننا المعاينة وهل يمكن وضع الناتج في جوجل ميل وخروجه بنفس التنسيق ام سنواجه نفس المشاكل القديمة الموجودة في محررات لها نفس الفكرة؟

شكرا لمجهودك

-1
عمر النجار أضف ردا

مبادرة جميلة لكن عندي إقتراح واحد وهو جعل التثخين بنجمتين (أي نجمة عند البداية ونجمة عند النهاية)بدلا من أربعة نجوم (أي نجمتين عند البداية ونجمتين عند النهاية)

لاننا تعودنا في حسوب على هذا :)

أرجو كذلك أن تدعم الابتسامات فمثلا عند كتابتنا لهذه الابتسامة :) تظهر لنا إبتسامة صورية

وكذلك إن أمكنك أن تضيف ميزة تلوين النصوص .

0
01walid أضف ردا

شكرا لك

هذه الاقتراحات عبارة عن Syntax sugar قد تختلف من شخص إلى آخر،

الهدف من المحرر هو توفيره للتخصيص، وهو ليس منتج نهائي خاص بي، يمكن ﻷي كان تعديله حسب حاجاته (مثلا دعم الابتسامات أو تثخين النص بنجمتين فقط، كل هذا سهل وسأحاول شرح كيفية عمله)

لكن في نفس الوقت لو طبقت هذا سأحيد نوعا ما عن مواصفات Markdown القياسية (أي سأخرج عن القياس)، أنظر هنا: 

  • وهنا:

الخروج من هذا سيجعل هناك كثير من fragmentation لا أراها مفيدة حاليا :) فبالكاد تكون هناك ثقافة ماركداون بين المستخدمين العرب...

ماذا إن احتجت لنص مائل؟ :) هل ستعملّه بـ 4 نجمات؟ وبالتالي تعارض ما هو معمول به

حسوب IO تعمل بنسخة ماركداون مخففة فقط تكفي لنشر منشور بسيط، يعني ليست هي القياس :) وعندما تحتاج لكتابة مقال كامل ستحتاج لمثل هذه الأمور وبما هو متعارف عليه.

1
عمر النجار أضف ردا

ماذا إن احتجت لنص مائل؟ :) هل ستعملّه بـ 4 نجمات؟ وبالتالي تعارض ما هو معمول به

حسنا كنت أفكر في أن النص المائل بأربع نجمات :) , لكن كما قلت بما أن هذا مخالف للقياس فغيرت رأيي البقاء على القياس أفضل :) .

وشكرا لك على التوضيح لانني لم أكن أعلم بهذا الأمور, في إنتظار شرحك لكيفية التعديل :)