كيف أستخدم مكتبة Prism.js

أولاً عليك باستيراد الملفات المطلوبة وهي:

• prism.js
• prism.css
• prism-live.css
• prism-live.js

ويمكنك استيرادها من خلال الروابط التالية:

  <link
      rel="stylesheet"
      href="https://cdn.jsdelivr.net/npm/prismjs@1.29.0/themes/prism-tomorrow.min.css"
    />
    <script src="
    https://cdn.jsdelivr.net/npm/prismjs@1.29.0/prism.min.js
    "></script>
    <script src="https://cdn.jsdelivr.net/npm/prismjs@1.29.0/plugins/autoloader/prism-autoloader.min.js"></script>

ثم استيراد ملف prism-live.js كالتالي:

    <script src="prism-live.js?load=css,html,javascript"></script>

 حيث أن prism-live.js تعتمد على prism.js وتسمح بتلوين الأكواد داخل عنصر <textarea>.

وبعد ذلك عليك بحقن الأكواد من خلال جافاسكريبت في iframe  وضع له id وليكن باسم code كالتالي:

 <iframe id="code"></iframe>

وقد شرحت الأمر بالتفصيل في سؤال من قبل عن كيفية إنشاء محرر أكواد بسيط مثل CodePen هنا:

• موقع محرر اكواد

يجب تضمين ملفات المكتبة 

<link href="path/to/prism.css" rel="stylesheet">
<script src="path/to/prism.js"></script>

بالإضافة إلى ذلك، إذا كنت ترغب في دعم لغات معينة، يجب أيضًا تضمين ملفات لغة Prism.js المناسبة. مثلا، إذا كنت تستخدم JavaScript، يمكنك تضمين ملف JavaScript Prism.js كما يلي:

<script src="path/to/prism-language.js"></script>

ثم يمكنك تفعيل المكتبة من خلال الكود التالي 

<script>
  Prism.highlightAll();
</script>

بتاريخ 4 ساعة قال Mustafa Suleiman:

أولاً عليك باستيراد الملفات المطلوبة وهي:

• prism.js
• prism.css
• prism-live.css
• prism-live.js

ويمكنك استيرادها من خلال الروابط التالية:

  <link
      rel="stylesheet"
      href="https://cdn.jsdelivr.net/npm/prismjs@1.29.0/themes/prism-tomorrow.min.css"
    />
    <script src="
    https://cdn.jsdelivr.net/npm/prismjs@1.29.0/prism.min.js
    "></script>
    <script src="https://cdn.jsdelivr.net/npm/prismjs@1.29.0/plugins/autoloader/prism-autoloader.min.js"></script>

ثم استيراد ملف prism-live.js كالتالي:

    <script src="prism-live.js?load=css,html,javascript"></script>

 حيث أن prism-live.js تعتمد على prism.js وتسمح بتلوين الأكواد داخل عنصر <textarea>.

وبعد ذلك عليك بحقن الأكواد من خلال جافاسكريبت في iframe  وضع له id وليكن باسم code كالتالي:

 <iframe id="code"></iframe>

وقد شرحت الأمر بالتفصيل في سؤال من قبل عن كيفية إنشاء محرر أكواد بسيط مثل CodePen هنا:

• موقع محرر اكواد

لم يشتغل اخي 

بتاريخ 31 دقائق مضت قال علي الكاسر:

لم يشتغل اخي 

من المفترض أن يعمل معك في حال قمت بإتباع الخطوات في النقاش الذي أرفقته.

وعلي أي حال إليك نموذج بسيط قمت بتنفيذه من قبل لشرح النقاش المذكور:

prism-js.rar

بتاريخ 29 دقائق مضت قال Mustafa Suleiman:

من المفترض أن يعمل معك في حال قمت بإتباع الخطوات في النقاش الذي أرفقته.

وعلي أي حال إليك نموذج بسيط قمت بتنفيذه من قبل لشرح النقاش المذكور:

 

prism-js.rar 8.27 kB · 0 تنزيلات

شكرا اخي الان اشتغل 

بتاريخ 12 ساعة قال Mustafa Suleiman:

من المفترض أن يعمل معك في حال قمت بإتباع الخطوات في النقاش الذي أرفقته.

وعلي أي حال إليك نموذج بسيط قمت بتنفيذه من قبل لشرح النقاش المذكور:

 

prism-js.rar 8.27 kB · 1 تنزيل

اخي  يوحد مشكله في هذا المحرر حيث لا يمكنني رؤية باقي الكود اذا كان نص السطر طويل وهذا امر غير مرغوب فمن الصعب التعامل معه. هل يوجد مكتبه اخرى تعمل محرر بشكل افضل واقوى