اضافة اداة صندوق الاكواد لمدونات بلوجر

[ahmed2]

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

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

التركيب
اولا ابحث عن الوسم
</head>
في الكود القالب الخاص بمدونتك
وضع فوقه الكود التالي

    <link href="https://cdnjs.cloudflare.com/ajax/libs/prism/1.25.0/themes/prism-tomorrow.min.css" rel="stylesheet">
    <link href="https://cdnjs.cloudflare.com/ajax/libs/prism/1.25.0/plugins/line-numbers/prism-line-numbers.min.css" rel="stylesheet">
    <script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.25.0/prism.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.25.0/plugins/line-numbers/prism-line-numbers.min.js"></script>

ثم ابحث عن الوسم
</body>
وضع الكود التالي فوقه ..
او ضعه في اداه من التخطيط

<script>
    function copyCode(button) {
        const code = button.nextElementSibling.querySelector('code').innerText;
        navigator.clipboard.writeText(code).then(() => {
            button.textContent = 'تم النسخ';
            setTimeout(() => {
                button.textContent = 'نسخ';
            }, 2000);
        }).catch(err => {
            console.error('Failed to copy text: ', err);
        });
    }
</script>

ثم ابحث عن الوسم
]]></b:skin>
وضع الكود التالي فوقه

.code-box {
            background-color: #2d2d2d;
            color: #ccc;
            padding: 1em;
            border-radius: 5px;
            overflow: auto;
            margin: 20px 0;
            position: relative;
        }
pre {
            margin: 0;
            padding-left: 3.8em; /* adjust if necessary */
        }
  
        .copy-button {
            position: absolute;
            top: 10px;
            right: 10px;
            background-color: #4CAF50;
            color: white;
            border: none;
            padding: 5px 10px;
            cursor: pointer;
            border-radius: 3px;
            z-index: 999999;
}
 .copy-button:hover {
            background-color: #45a049;
}
.code-type {
            position: absolute;
            top: 10px;
            left: 10px;
            background-color: rgba(0, 0, 0, 0.5);
            color: white;
            padding: 5px 10px;
            border-radius: 3px;
            z-index: 999999;
            font-size: 0.9em;
        }

بهذه الطريقة تكون قد ركبت الاضافة بالطريقه الصحيحه الان اليك
طريقة استخدامها في مقالاتك
اولا

كود صندوق javascript

<div class="code-box">
    <div class="code-type">JavaScript</div>
    <button class="copy-button" onclick="copyCode(this)">نسخ</button>
    <pre class="line-numbers"><code class="language-javascript">
        // مثال على شفرة JavaScript
        
    </code></pre>
</div>

ثانيا كود صندوق css

<div class="code-box">
    <div class="code-type">CSS</div>
    <button class="copy-button" onclick="copyCode(this)">نسخ</button>
  <pre class="line-numbers"><code class="language-css">
        /* مثال على شفرة CSS */
        
            
            
        
    </code></pre>
</div>

ثالثا صندوق كود HTML

<div class="code-box">
    <div class="code-type">HTML</div>
    <button class="copy-button" onclick="copyCode(this)">نسخ</button>
    <pre class="line-numbers"><code class="language-html">
        &lt;!-- مثال على شفرة HTML --&gt;
      
    </code></pre>
</div>

بهذه نصل الي نهاية موضوعنا عن تركيب صندوق الاكواد مع التلوين التلقائي وعدد الاسطر

ملاحظه: تاكد من استخدم
محول الاكواد هنا قبل وضع الاكواد في الصندوق لعرضها بشكل صحيح

 

[فخم الطلة]

images100

 

[يشهب]

مفيدة و عملية... شكراً على الكود الرائع
دمت بود؛

 

[المشاغب]

بارك الله فيك عمل ممتاز ومجهود جميل
وفقك الله

 

[Shamria]

بارك الله فيك

 

[Hamza2000]

بارك الله فيكِ و جزاكِ كل خير

 

[فوتوماكس]

شكراً على الكود