انشاء صفحة أداة تحويل الأكواد الى مدونة بلوجر

أهمية كود تحويل الأكواد إلى تنسيق آمن في المدونة

الكود الذي قدمته هو أداة لتحويل الأكواد إلى تنسيق آمن (HTML Entities) يمكن استخدامها في المدونات أو المواقع الإلكترونية. هذه الأداة تسمح للمستخدمين بتحويل الأكواد البرمجية إلى تنسيق يمكن عرضه بشكل صحيح في صفحات الويب دون تفسيرها كأوامر HTML أو JavaScript. إليك شرح مفصل لأهمية الكود ووظيفته:

ما الذي يفعله هذا الكود؟

• تحويل الأكواد إلى تنسيق آمن:
  • يحول الرموز الخاصة (مثل <, >, &, ", ') إلى كيانات HTML (مثل <, >, &, ", ').
  • هذا يمنع المتصفح من تفسير الأكواد كأوامر HTML أو JavaScript، مما يجعلها آمنة للعرض.
• نسخ الكود المحول:
  • يسمح للمستخدمين بنسخ الكود المحول إلى الحافظة بنقرة زر واحدة.
• تنظيف الحقل النصي:
  • يسمح للمستخدمين بمسح محتوى حقل النص بسهولة.

أهمية الكود في المدونة

• عرض الأكواد بشكل صحيح:
  • عند كتابة أكواد برمجية في المدونة، قد يتم تفسيرها بشكل خاطئ من قبل المتصفح. هذه الأداة تحول الأكواد إلى تنسيق آمن يمكن عرضه بشكل صحيح.
• تحسين تجربة المستخدم:
  • تسمح للزوار بتحويل الأكواد ونسخها بسهولة، مما يجعل المدونة أكثر تفاعلية وسهولة في الاستخدام.
• حماية المدونة من الأخطاء:
  • تحويل الأكواد إلى تنسيق آمن يمنع حدوث أخطاء في عرض الصفحة أو تنفيذ أكواد غير مرغوب فيها.
• توفير الوقت:
  • بدلاً من تحويل الأكواد يدويًا، يمكن للزوار استخدام هذه الأداة للقيام بذلك تلقائيًا.

كيف يعمل الكود؟

1. إدخال الكود:
   • يقوم المستخدم بلصق الكود في الحقل النصي.
2. تحويل الكود:
   • عند النقر على زر "تحويل الكود"، يتم تحويل الرموز الخاصة إلى كيانات HTML.
3. نسخ الكود:
   • عند النقر على زر "نسخ"، يتم نسخ الكود المحول إلى الحافظة.
4. تنظيف الحقل:
   • عند النقر على زر "تنظيف"، يتم مسح محتوى حقل النصي.

مثال عملي

قبل التحويل:

<div class="example"> <p>Hello, World!</p> </div>

بعد التحويل:

<div class="example"> <p>Hello, World!</p> </div>

فوائد استخدام الكود في المدونة

• عرض أكواد برمجية بشكل احترافي:
  • يمكنك مشاركة الأكواد البرمجية مع القراء دون حدوث أخطاء في العرض.
• تحسين SEO:
  • عرض الأكواد بشكل صحيح يمكن أن يحسن من تجربة المستخدم، مما يؤثر إيجابًا على ترتيب المدونة في محركات البحث.
• زيادة تفاعل الزوار:
  • توفير أدوات مفيدة مثل تحويل ونسخ الأكواد يشجع الزوار على التفاعل مع المحتوى.
• حماية المدونة:
  • تحويل الأكواد إلى تنسيق آمن يمنع تنفيذ أكواد ضارة أو غير مرغوب فيها.

كيفية استخدام الكود في المدونة

1. إضافة الكود إلى القالب:
   • انسخ الكود الكامل وألصقه في القالب الخاص بمدونتك (في قسم HTML أو JavaScript).
2. تخصيص التصميم:
   • يمكنك تعديل الألوان والأحجام في CSS لتتناسب مع تصميم مدونتك.
3. اختبار الأداة:
   • تأكد من أن الأداة تعمل بشكل صحيح عن طريق لصق كود ما وتحويله.

ملاحظات

• إذا كنت تستخدم منصة مثل بلوجر، تأكد من حفظ التغييرات بعد إضافة الكود.
• يمكنك إضافة المزيد من الميزات، مثل تحويل الأكواد إلى تنسيقات أخرى (مثل Markdown).
• اايضا تستيطع ان تخرج مخرجات الكود مابين وسمي <pre><code class="language-javascript">

  مثال

  <div class="example"> <p>Hello, World!</p> </div>
  بعد التحويل

  سنري الكود تم تحويله ووضع بين وسم <pre> , <code>

  
  <div class="example"> <p>Hello, World!</p> </div>
      

  بتغيير هذا الكود ووضع ماتريده بحيث بعد تحويل الكود يكون جاهز

  
  // إنشاء الهيكل المطلوب وإدراج الكود المحول فيه
      const formattedCode = `
  <div class="pre nb" data-text="كود المثال" data-file="example" data-lang="javascript">
      <pre><code class="language-javascript">
  ${code}
      </code></pre>
  </div>
      `;
      

طريقة التركيب

 من لوحة تحكم بلوجر

اضغط على الصفحات من خلال الشريط الجانبي الأيمن.

اضغط انشاء صفحة جديدة .

اختر عرض Html ثم قم بلصق كود محول الأكواد.

<div align="center">
  <style scoped="" type="text/css">
    /* css سيتم وضعه في الجزء التالي */
  </style>

  <div class="tool-container">
    <div class="tool-header">
      <h3>كيف تستعمل هذه الأداة؟</h3>
      <p>فقط الصق أي أكواد تريد تحويلها إلى حقل النص، ثم اضغط على زر "تحويل الكود". بعد التحويل، يمكنك نسخ الكود واستخدامه دون حدوث أي مشكلات.</p>
    </div>

    <div id="parser2">
      <textarea id="somewhere" placeholder="الصق الكود هنا..."></textarea>
      <div class="alert alert-success collapse" id="btnInfo" role="alert">
        <button class="close close-copy" onclick="hideAlert()" type="button">×</button>
        <h4>تم نسخ الكود إلى الحافظة</h4>
      </div>
      <div class="button-group">
        <button class="btn btn-primary btn-parse" onclick="convert()" type="button">تحويل الكود</button>
        <button class="btn btn-info btn-copy" onclick="copyCode()" type="button">نسخ</button>
        <button class="btn btn-danger btn-clear" onclick="clearCode()" type="button">تنظيف</button>
      </div>
    </div>
  </div>
</div>
<style scoped="" type="text/css">
  .tool-container {
    max-width: 800px;
    margin: 0 auto;
    padding: 20px;
    background: #f9f9f9;
    border-radius: 10px;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
  }

  .tool-header {
    text-align: center;
    margin-bottom: 20px;
  }

  .tool-header h3 {
    font-size: 24px;
    color: #333;
  }

  .tool-header p {
    font-size: 16px;
    color: #666;
  }

  #parser2 textarea {
    width: 100%;
    height: 200px;
    padding: 15px;
    font-family: Consolas, Monaco, 'Andale Mono', monospace;
    font-size: 14px;
    color: #333;
    background: #fef1c8;
    border: 1px solid #ddd;
    border-radius: 8px;
    box-shadow: inset 0 -5px 5px rgba(0, 0, 0, 0.05);
    resize: vertical;
  }

  #parser2 textarea:focus {
    outline: none;
    border-color: #3e51b5;
  }

  .button-group {
    display: flex;
    justify-content: center;
    gap: 10px;
    margin-top: 20px;
  }

  .btn {
    font-size: 14px;
    padding: 10px 20px;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    transition: all 0.3s ease;
  }

  .btn-primary {
    background: #3e51b5;
    color: #fff;
  }

  .btn-primary:hover {
    opacity: 0.9;
  }

  .btn-info {
    background: #5bc0de;
    color: #fff;
  }

  .btn-info:hover {
    background: #31b0d5;
  }

  .btn-danger {
    background: #f39c12;
    color: #fff;
  }

  .btn-danger:hover {
    opacity: 0.9;
  }

  .alert {
    position: fixed;
    top: 20px;
    right: 20px;
    padding: 10px 20px;
    background: #fff;
    border-radius: 5px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
    display: none;
  }

  .alert.show {
    display: block;
  }

  .close {
    background: none;
    border: none;
    cursor: pointer;
    font-size: 18px;
    color: #333;
  }

  .close:hover {
    color: #000;
  }
</style>
<script>
  // دالة تحويل الكود إلى تنسيق آمن ووضعه في الهيكل المطلوب
  function convert() {
    const input = document.getElementById("somewhere");
    let code = input.value.trim();

    if (code === "") {
      alert("يرجى إدخال كود لتحويله.");
      return;
    }

    // تحويل الرموز الخاصة إلى كيانات HTML
    code = code.replace(/&/g, "&amp;")
               .replace(/</g, "&lt;")
               .replace(/>/g, "&gt;")
               .replace(/"/g, "&quot;")
               .replace(/'/g, "&#039;");

    // إنشاء الهيكل المطلوب وإدراج الكود المحول فيه
    const formattedCode = `
<div class="pre nb" data-text="كود المثال" data-file="example" data-lang="javascript">
    <pre><code class="language-javascript">
${code}
    </code></pre>
</div>
    `;

    // إظهار الكود المحول في الحقل
    input.value = formattedCode;
  }

  // دالة نسخ الكود
  function copyCode() {
    const input = document.getElementById("somewhere");
    input.select();
    document.execCommand("copy");

    const alert = document.getElementById("btnInfo");
    alert.style.display = "block";
    setTimeout(() => alert.style.display = "none", 3000);
  }

  // دالة تنظيف الحقل
  function clearCode() {
    document.getElementById("somewhere").value = "";
  }

  // دالة إخفاء التنبيه
  function hideAlert() {
    document.getElementById("btnInfo").style.display = "none";
  }
</script>
    

تابعنا في المقالة القادمة لتعرف كيفية التركيب
    

من خلال الشريط الجانبي في اليسار قم بوضع وصف للصفحة .

قم بغلق التعليقات لأنها لا تناسب هذا النوع من المحتوى.

قم بنشر الصفحة .

معاينة

كيف تستعمل هذه الأداة؟

فقط الصق أي أكواد تريد تحويلها إلى حقل النص، ثم اضغط على زر "تحويل الكود". بعد التحويل، يمكنك نسخ الكود واستخدامه دون حدوث أي مشكلات.

تم نسخ الكود إلى الحافظة

خاتمة

هذا الكود يُعد أداة مفيدة لأي مدونة أو موقع إلكتروني يعرض أكواد برمجية. فهو يحسن تجربة المستخدم ويحمي المدونة من الأخطاء، بالإضافة إلى تسهيل مشاركة الأكواد بشكل احترافي.