ليش نحتاج "Code Vault" خاص فينا؟
يا هلا بالجميع! كثير مننا يكتب شروحات تقنية ويحط أكواد، صح؟ المشكلة لما يكون عندك كود في GitHub وتبي تعرضه بمدونتك، بتضطر تنسخه وتلصقه. طيب لو غيرت الكود في GitHub، لازم ترجع تعدل المدونة يدوي! هذا شغل متعب وما ينفع. الحل؟ نسوي "Code Vault" خاص فينا يجيب الكود مباشرة من GitHub ويوريه بمدونتك، كأنه جزء منها.
كيف نجيب الكود الخام من GitHub؟
الخطوة الأولى والأهم هي كيف نوصل للكود اللي على GitHub بصيغته الخام. GitHub يوفر لنا طريقة سهلة جداً لهذا الشيء. كل ملف كود عندك في مستودع عام (Public Repository) له رابط مباشر يجيب لك محتواه الخام (Raw Content).
ملاحظة سريعة: هذا الشرح يفترض إن المستودع اللي بتجيب منه الكود عام (Public). لو كان خاص (Private)، بتحتاج تضيف توكن (Token) وهذا موضوع ثاني، لكن للأغراض العادية للمدونات، العام يكفي.
الصيغة العامة للرابط هي كالتالي:
https://raw.githubusercontent.com/{اسم_المستخدم}/{اسم_المستودع}/{اسم_الفرع}/{مسار_الملف_داخل_المستودع}
مثال:
https://raw.githubusercontent.com/your-username/your-repo/main/src/my-code.js
تجهيز صفحة المدونة (HTML & CSS)
الآن، نحتاج مكان في صفحة المدونة عشان نعرض فيه الكود. بنستخدم عنصر div بسيط كـ "حاوية"، ونعطيه بعض الخصائص عشان نعرف من وين يجيب الكود وأي لغة برمجة هو. للـ CSS، ما بنسوي شي معقد لأن مكتبة التظليل (Prism.js) بتتكفل بالستايل الأساسي.
<!DOCTYPE html>
<html lang="ar">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>مدونتي - مثال Code Vault</title>
<!-- رابط ستايل Prism.js (اختر الثيم اللي يعجبك) -->
<link href="https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/themes/prism-okaidia.min.css" rel="stylesheet" />
<style>
body {
font-family: 'Arial', sans-serif;
line-height: 1.6;
margin: 20px;
background-color: #f4f4f4;
color: #333;
}
.code-container {
background-color: #fff;
border: 1px solid #ddd;
padding: 15px;
margin-bottom: 20px;
border-radius: 8px;
}
h3 {
color: #0056b3;
}
blockquote {
background-color: #fcfcfc;
border-left: 5px solid #0056b3;
margin: 1.5em 10px;
padding: 0.5em 10px;
color: #666;
}
</style>
</head>
<body>
<h1>كيف تسوي Code Vault خاص فيك</h1>
<p>هذا مثال لكيفية جلب وعرض الكود من GitHub مباشرة.</p>
<div
class="code-container"
data-github-url="https://raw.githubusercontent.com/your-username/your-repo/main/path/to/your/file.js"
data-lang="javascript">
<p>جاري تحميل الكود...</p>
</div>
<!-- سكربت Prism.js (لازم يكون قبل سكربت الجلب حقنا) -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/prism.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/components/prism-javascript.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/components/prism-css.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/components/prism-markup.min.js"></script>
<script>
// بنضيف كود الجافاسكربت هنا بعد شوي
</script>
</body>
</html>انتبه! غير
your-username,your-repo,main, وpath/to/your/file.jsبالمعلومات الصحيحة لملفك في GitHub. وكمانdata-langلازم يكون مطابق للغة الكود (مثلاًjavascript,python,html,cssوهكذا) عشان Prism.js يظللها صح.
إضافة السحر مع JavaScript
هنا يجي دور JavaScript! بنستخدم fetch API عشان نجيب الكود من الرابط اللي حددناه، وبعدين نحطه داخل صفحتنا. بعد ما نحطه، بنخلي Prism.js يشتغل ويظلل الكود بشكل حلو.
document.addEventListener('DOMContentLoaded', () => {
const codeContainers = document.querySelectorAll('.code-container');
codeContainers.forEach(container => {
const githubUrl = container.getAttribute('data-github-url');
const lang = container.getAttribute('data-lang');
if (githubUrl && lang) {
fetch(githubUrl)
.then(response => {
if (!response.ok) {
throw new Error(<code dir="ltr" style="background:#f3f4f6; color:#0056b3; padding:2px 6px; border-radius:4px; font-family:monospace; direction:ltr !important; display:inline-block;">HTTP error! status: ${response.status}</code>);
}
return response.text();
})
.then(code => {
const pre = document.createElement('pre');
const codeElement = document.createElement('code');
codeElement.className = <code dir="ltr" style="background:#f3f4f6; color:#0056b3; padding:2px 6px; border-radius:4px; font-family:monospace; direction:ltr !important; display:inline-block;">language-${lang}</code>;
codeElement.textContent = code;
pre.appendChild(codeElement);
container.innerHTML = ''; // تنظيف المحتوى القديم (مثل "جاري التحميل...")
container.appendChild(pre);
// تظليل الكود باستخدام Prism.js
Prism.highlightElement(codeElement);
})
.catch(error => {
console.error('Error fetching code:', error);
container.innerHTML = <code dir="ltr" style="background:#f3f4f6; color:#0056b3; padding:2px 6px; border-radius:4px; font-family:monospace; direction:ltr !important; display:inline-block;"><p style="color: red;">لم يتمكن من جلب الكود: ${error.message}</p></code>;
});
} else {
container.innerHTML = '<p style="color: orange;">خطأ: لم يتم تحديد رابط GitHub أو اللغة.</p>';
}
});
});دمج Prism.js للتظليل الاحترافي
Prism.js مكتبة ممتازة لتظليل الأكواد. عشان تستخدمها، تحتاج تضيف ملفات الـ CSS والـ JavaScript الخاصة فيها لصفحتك. في المثال اللي فوق، أنا حطيت روابط لـ CDN عشان تسهل عليك الموضوع، لكن الأفضل تحملها وتستضيفها عندك لو تبي تحكم أكبر. تقدر تختار الثيم اللي يعجبك واللغات اللي تحتاجها من موقعهم الرسمي.
نصيحة: عند تحميل Prism.js من موقعهم، تقدر تختار اللغات اللي تحتاج تظليلها فقط (مثل JavaScript, HTML, CSS, Python, PHP, إلخ) عشان حجم الملفات يكون أصغر وما تحمل أشياء ما تحتاجها.
الكود جاهز: اجمعها كلها!
الآن صار عندك كل المكونات! كل اللي عليك تسويه هو تحط الـ HTML الخاص بالحاوية، وتضيف سكربتات Prism.js، وبعدها سكربت الـ JavaScript اللي سويناه. تأكد إن سكربتات Prism.js تكون قبل السكربت حقك عشان تكون المكتبة جاهزة للاستخدام.
هذا هو الشكل النهائي للـ HTML والـ JavaScript مع بعض:
<!DOCTYPE html>
<html lang="ar">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>مدونتي - Code Vault جاهز</title>
<link href="https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/themes/prism-okaidia.min.css" rel="stylesheet" />
<style>
body {
font-family: 'Arial', sans-serif;
line-height: 1.6;
margin: 20px;
background-color: #f4f4f4;
color: #333;
}
.code-container {
background-color: #fff;
border: 1px solid #ddd;
padding: 15px;
margin-bottom: 20px;
border-radius: 8px;
}
h3 {
color: #0056b3;
}
blockquote {
background-color: #fcfcfc;
border-left: 5px solid #0056b3;
margin: 1.5em 10px;
padding: 0.5em 10px;
color: #666;
}
</style>
</head>
<body>
<h1>Code Vault الخاص بك جاهز للعمل!</h1>
<p>هذا مثال لكيفية جلب وعرض الكود من GitHub مباشرة.</p>
<div
class="code-container"
data-github-url="https://raw.githubusercontent.com/your-username/your-repo/main/path/to/your/file.js"
data-lang="javascript">
<p>جاري تحميل الكود...</p>
</div>
<div
class="code-container"
data-github-url="https://raw.githubusercontent.com/your-username/your-repo/main/path/to/another/style.css"
data-lang="css">
<p>جاري تحميل كود CSS...</p>
</div>
<!-- سكربت Prism.js (لازم يكون قبل سكربت الجلب حقنا) -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/prism.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/components/prism-javascript.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/components/prism-css.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/components/prism-markup.min.js"></script>
<script>
document.addEventListener('DOMContentLoaded', () => {
const codeContainers = document.querySelectorAll('.code-container');
codeContainers.forEach(container => {
const githubUrl = container.getAttribute('data-github-url');
const lang = container.getAttribute('data-lang');
if (githubUrl && lang) {
fetch(githubUrl)
.then(response => {
if (!response.ok) {
throw new Error(<code dir="ltr" style="background:#f3f4f6; color:#0056b3; padding:2px 6px; border-radius:4px; font-family:monospace; direction:ltr !important; display:inline-block;">HTTP error! status: ${response.status}</code>);
}
return response.text();
})
.then(code => {
const pre = document.createElement('pre');
const codeElement = document.createElement('code');
codeElement.className = <code dir="ltr" style="background:#f3f4f6; color:#0056b3; padding:2px 6px; border-radius:4px; font-family:monospace; direction:ltr !important; display:inline-block;">language-${lang}</code>;
codeElement.textContent = code;
pre.appendChild(codeElement);
container.innerHTML = ''; // تنظيف المحتوى القديم (مثل "جاري التحميل...")
container.appendChild(pre);
// تظليل الكود باستخدام Prism.js
Prism.highlightElement(codeElement);
})
.catch(error => {
console.error('Error fetching code:', error);
container.innerHTML = <code dir="ltr" style="background:#f3f4f6; color:#0056b3; padding:2px 6px; border-radius:4px; font-family:monospace; direction:ltr !important; display:inline-block;"><p style="color: red;">لم يتمكن من جلب الكود: ${error.message}</p></code>;
});
} else {
container.innerHTML = '<p style="color: orange;">خطأ: لم يتم تحديد رابط GitHub أو اللغة.</p>';
}
});
});
</script>
</body>
</html>ملاحظات سريعة قبل ما تروح
- الأمان: هذي الطريقة ممتازة للمستودعات العامة. لا تستخدمها لجلب أكواد حساسة من مستودعات خاصة إلا إذا كنت عارف وش تسوي وتستخدم توكنات آمنة (وهذا يتطلب حل من طرف السيرفر).
- الكفاءة: لمدونة صغيرة أو متوسطة، هذي الطريقة ممتازة. لو عندك عدد كبير جداً من الأكواد، ممكن تفكر في حلول تخزين مؤقت (Caching) على السيرفر عشان تقلل طلبات الـ API على GitHub وتحسن سرعة التحميل.
- التعامل مع الأخطاء: الكود اللي كتبناه فيه جزء بسيط للتعامل مع الأخطاء، لكن تقدر تطوره أكثر عشان يكون فيه رسائل أوضح للمستخدم.
وبكذا، صار عندك "Code Vault" خاص فيك يجيب الأكواد من GitHub ويخلي مدونتك دايماً محدثة وبشكل احترافي. بالتوفيق!