اظهار صفحة ويب في ملف README.md

وعليكم السلام

يمكنك إظهار صفحة ويب ضمن ملف README.md في GitHub باستخدام عنصر <iframe> في HTML.

يمكنك القيام بذلك كالتالي :

• قم بإنشاء ملف HTML يحتوي على الكود الذي تريد عرضه. على سبيل المثال، اسمه index.html.
• قم بإنشاء ملف README.md وضع فيه الكود التالي:

  <iframe src="index.html" width="100%" height="500px"></iframe>

• يمكنك أيضا إضافة الخيارات الخاصة بالتنسيق CSS إما داخل عنصر <style> في ملف HTML

  <style>
      /* CSS styles here */
  </style>

• أو باستخدام CSS الخارجي.

  <link rel="stylesheet" type="text/css" href="styles.css">

لا مشكلة تستطيع استخدام العناصر التالية من HTML فقط وليس كل العناصر:

  h1 h2 h3 h4 h5 h6 h7 h8 br b i strong em a pre code img tt
          div ins del sup sub p ol ul table thead tbody tfoot blockquote
          dl dt dd kbd q samp var hr ruby rt rp li tr td th s strike summary details

أيضًا تستطيع استخدام السمات التالية:

      'a'          => ['href'],
          'img'        => ['src', 'longdesc'],
          'div'        => ['itemscope', 'itemtype'],
          'blockquote' => ['cite'],
          'del'        => ['cite'],
          'ins'        => ['cite'],
          'q'          => ['cite'],
          :all         => ['abbr', 'accept', 'accept-charset',
                           'accesskey', 'action', 'align', 'alt', 'axis',
                           'border', 'cellpadding', 'cellspacing', 'char',
                           'charoff', 'charset', 'checked',
                           'clear', 'cols', 'colspan', 'color',
                           'compact', 'coords', 'datetime', 'dir',
                           'disabled', 'enctype', 'for', 'frame',
                           'headers', 'height', 'hreflang',
                           'hspace', 'ismap', 'label', 'lang',
                           'maxlength', 'media', 'method',
                           'multiple', 'name', 'nohref', 'noshade',
                           'nowrap', 'open', 'prompt', 'readonly', 'rel', 'rev',
                           'rows', 'rowspan', 'rules', 'scope',
                           'selected', 'shape', 'size', 'span',
                           'start', 'summary', 'tabindex', 'target',
                           'title', 'type', 'usemap', 'valign', 'value',
                           'vspace', 'width', 'itemprop']

أي تلك هي العناصر التي تستطيع استخدامها بشكل صريح مباشرًة لكن إذا أردت استخدام تنسيقات لن تتمكن من ذلك داخل عنصر <style> ولن يتم التعرف عليه، لكن تستطيع تنسيق العناصر بواسطة CSS بكتابة التنسيق داخل العنصر نفسه inline كالتالي:

<div style="width: 100%;">
</div>

وإذا أردت تنفيذ تصميم معين فعليك تصميمه من خلال استخدام عنصر svg ثم عنصر foreignObject الخاص به ووضع كود HTML الذي تريده، إليك مثال لملف باسم animated.svg تستطيع كتابة مثله في محرر الأكواد لديك:

 <svg fill="none" viewBox="0 0 600 300" width="600" height="300" xmlns="http://www.w3.org/2000/svg">
  <foreignObject width="100%" height="100%">
    <div xmlns="http://www.w3.org/1999/xhtml">
      <style>
        @keyframes hi  {
            0% { transform: rotate( 0.0deg) }
           10% { transform: rotate(14.0deg) }
           20% { transform: rotate(-8.0deg) }
           30% { transform: rotate(14.0deg) }
           40% { transform: rotate(-4.0deg) }
           50% { transform: rotate(10.0deg) }
           60% { transform: rotate( 0.0deg) }
          100% { transform: rotate( 0.0deg) }
        }

        @keyframes gradient {
          0% {
            background-position: 0% 50%;
          }
          50% {
            background-position: 100% 50%;
          }
          100% {
            background-position: 0% 50%;
          }
        }

        .container {
          --color-main: #5452ee;
          --color-primary: #e73c7e;
          --color-secondary: #23a6d5;
          --color-tertiary: #ffff;

          background: linear-gradient(-45deg, var(--color-main), var(--color-primary), var(--color-secondary), var(--color-tertiary));
          background-size: 400% 400%;
          animation: gradient 15s ease infinite;

          width: 100%;
          height: 300px;

          display: flex;
          justify-content: center;
          align-items: center;
          color: white;

          font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
        }

        .hi {
          animation: hi 1.5s linear -0.5s infinite;
          display: inline-block;
          transform-origin: 70% 70%;
        }

        @media (prefers-color-scheme: light) {
          .container {
            --color-main: #F15BB5;
            --color-primary: #24b0ef;
            --color-secondary: #4526f6;
            --color-tertiary: #f6f645;
          }
        }

        @media (prefers-reduced-motion) {
          .container {
            animation: none;
          }

          .hi {
            animation: none;
          }
        }
      </style>

      <div class="container">
        <h1>Hi there, my name is Nikola <div class="hi">👋</div></h1>
      </div>
    </div>
  </foreignObject>
</svgg

والنتيجة هي التالي:

بعد ذلك تستطيع رفع ذلك الملف على أي منصة لاستضافة الصور، ثم استخدامه في ملف README كالتالي:

<div style="width: 100%;">
  <img src="animated.svg" style="width: 100%;" alt="Click to see the source">
</div>