هذه تجربة مني لتوفير مُحرر Markodwn يدعم اللغة العربية لكن أيضا يُراعي كتابة الشفرات البرمجية ويتركها LTR وقت الكتابة، هذا الإصدار تجريبي...
لتجربة المحرر:
http://01walid.github.io/mu...الكود المصدري:
مساهماتكم مُرحب بها
التعليقات
السلام عليكم،
عمل ممتاز وليد، بالنسبة لي أفضل prismjs.com عوض CodeMirror استخدمته في أحد المشاريع بدا لي أصغر/أخف، طبعا لايهم ما الذي استخدمته، المهم الفكرة.
ممكن نعرف كمن من الوقت استغرق منك؟
وعليكم السلام،
prismjs مُجرد Syntax Highlighter وليس عبارة عن مُحرر
ﻷقرب لك الفكرة، فـ CodeMirror أشبه بـِ CKEditor, tinyMCE وغيرهم لكن مُوجه أساسيا ليكون محرر شفرات برمجية على المتصفح، لديه واجهة برمجية غنية تسمح بتخصيص وإضافة دعم لغات وأدوات تحرير.
أقرب منافس له هو Ace Editor لكنه لا يدعم RTL بشكل جيد بعد تجريبي له، ولديه مشاكل مع تحركات المؤشر (cursor movement) لما يكون الوضع RTL.
CodeMirror لديه دعم جيد، وهو مستعمل من طرف الكثير من المحررات والشركات، أنظر هنا:
بالنسبة للوقت المستغرق، فبالساعات استغرق مني الأمر حوالي 5 ساعات متقطعة ذهبت معظمها في البحث والتجريب حيث أن CodeMirror في وضعه الحالي لا يدعم جيدا RTL واضررت لاستخدام Branch آخر باسم direction على مستودعهم (لم يتم دمجه بعد) ﻷخرج بهذا.
عمل رائع (y)
ولكن لماذا لا يتم استخدام bbcode ? يعني مثل محرر منتديات و لكن خفيف ذو UX/UI جيدة ؟
ما كنت افكر فيه هو ان اعمل محرر نصوص يعمل على متصفح.
لكن للاسف لم افهم بعد كيف تعمل خاصية Syntax Highlighter
انا لا اريد ان استخدم اي اضافات بل اريد ان افهم و ابرمج كل شئ لوحدي مثلا CodeMirror وجدت نفسي امام الاف اسطر فقط الصق بدون اي فهم للاسف
شكرا،
الهدف هو توفير محرر Markdown نظرًا لبساطة اللغة وانتشارها ودعمها الجيد
هناك الكثير من parsers التي تعنى بالماركداون والتي تسمح لك بتحويل الناتج إلى html أو pdf، كما أنها أصبحت تُستخدم في تحرير الكتب خاصة البرمجية منها، وهي مستخدمة في مواقع كثيرة مألوفة لدينا كلغة تنسيق المواضيع والتعليقات مثل StackOverflow, github .. الخ
bbcode تقتصر على المنتديات فقط أو تقريبا، كما أنها بالمقرانة مع Markdown فهي لغة ثرثارة (verbose) أي تحتاج إلى [bb] فاتحة وأخرى [bb/] غالقة في كثير من التنسيقات، في حين يكاد يكون تنسيق ماركدوان يبدو بديهيا..
نعم ولكن ما اتحدث انا عنه مثلا لتجعل النص bold كل ما تحتاجه هو تحديد النص و اختيار زر bold من قائمة يعني مثل محرر وردبريس او وورد.
و لكن بسيط.
يُمكن إضافة الرموز المرئية لسهولة التعامل مع أوامر الـ 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, '**', '**');
خارج الموضوع :
كيف يمكن الحصول على موقع مثل 01walid.github.io لتنفذ عليه مشاريعك الموجودة على الـGithub ؟
هل تحتاج لدفع شيء ؟
والإستضافة على الـGithub صحيح ؟
لا تحتاج لدفع أي شيء، ونعم الاستضافة على github
هناك نوعين من المواقع:
موقع user أو organization
موقع لمشروع معين project site
ستحصل على نطاق فرعي خاص بك بشكل افتراضي من نوع
username.github.io
ولكل مشروع:
username.github.io/project-name
يكفي فقط انشاء فرع (branch) جديد في المستودع الذي تريد أن يكون لديه موقع خاص به، الفرع يكون باسم gh-pages ثم تدفع هناك صفحات الموقع
كل شيء مشروح هنا:
مبادرة جميلة لكن عندي إقتراح واحد وهو جعل التثخين بنجمتين (أي نجمة عند البداية ونجمة عند النهاية)بدلا من أربعة نجوم (أي نجمتين عند البداية ونجمتين عند النهاية)
لاننا تعودنا في حسوب على هذا :)
أرجو كذلك أن تدعم الابتسامات فمثلا عند كتابتنا لهذه الابتسامة :) تظهر لنا إبتسامة صورية
وكذلك إن أمكنك أن تضيف ميزة تلوين النصوص .
شكرا لك
هذه الاقتراحات عبارة عن Syntax sugar قد تختلف من شخص إلى آخر،
الهدف من المحرر هو توفيره للتخصيص، وهو ليس منتج نهائي خاص بي، يمكن ﻷي كان تعديله حسب حاجاته (مثلا دعم الابتسامات أو تثخين النص بنجمتين فقط، كل هذا سهل وسأحاول شرح كيفية عمله)
لكن في نفس الوقت لو طبقت هذا سأحيد نوعا ما عن مواصفات Markdown القياسية (أي سأخرج عن القياس)، أنظر هنا:
- وهنا:
الخروج من هذا سيجعل هناك كثير من fragmentation لا أراها مفيدة حاليا :) فبالكاد تكون هناك ثقافة ماركداون بين المستخدمين العرب...
ماذا إن احتجت لنص مائل؟ :) هل ستعملّه بـ 4 نجمات؟ وبالتالي تعارض ما هو معمول به
حسوب IO تعمل بنسخة ماركداون مخففة فقط تكفي لنشر منشور بسيط، يعني ليست هي القياس :) وعندما تحتاج لكتابة مقال كامل ستحتاج لمثل هذه الأمور وبما هو متعارف عليه.