في هذا الدرس ، سوف نستخدم جافا سكريبت تمييز قائم على بناء الجملة بسرعة إضافة بناء جملة تسليط الضوء على وظيفة في أي مشروع على شبكة الإنترنت – حتى على صدر صفحتها الأولى HTML بسيطة!
في هذا الدرس سوف نستخدم تقنيه الجافا سكريبت تقوم بإضافته علي بناء الجمله لتسليط الضوء علي أي مشروع علي شبكه الانترنت حتي علي صدر الصفحه الأولي html البسيطه
الخطوه الأولي: قم بتحميل مصدر الكود من هنــــــا
الخطوه الثانيه: قم بسحبه علي المشروع الخاص بك ولا تغير اي شئ داخله الا اذا كنت لا تريد ان تقوم باستخدام بعض ملفات الجافا سكريبت المحدده.
الخطوة 3 — استيراد الملفات الضرورية
ضمن ملف HTML الخاص بك (أو أي صفحة هي المسؤولة عن عرض وجهة نظركم)، واستيراد كل من الملفات وprettify.css prettify.js.
الخطوه الثالثه: قم باستيراد الملفات الضروريه
ضمن ملف HTML الخاص بك وقم باستيراد كل الملفات من prettify.js و prettify.css
[html]
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf—8">
<title>untitled</title>
<link rel="stylesheet" href="highlighter/prettify.css" />
</head>
<body>
<script src="highlighter/prettify.js"></script>
</body>
</html>
[/html]
والأن لنقوم بتميز بناء الجمله عن طريق اضافه :
[html] (function() {var jsSyntaxHighlighting = ‘rocks’;
})();
</pre> [/html]
الخطوه الرابعه : قم باستدعاء الداله prettyPrint() :
[html]<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>untitled</title>
<link rel="stylesheet" href="highlighter/prettify.css" />
</head>
<body>
<pre>
(function() {
var jsSyntaxHighlighting = ‘rocks’;
})();
</pre>
<script src="highlighter/prettify.js"></script>
<script>prettyPrint();</script>
</body>
</html>
[/html]
والأن قم باضافه أنماطك الخاصه علي التصميم:
[html] <head><meta charset="utf—8">
<title>untitled</title>
<link rel="stylesheet" href="highlighter/dessert.css" />
</head>
[/html]