    <!DOCTYPE html>
    <html>
    <head>
      <meta charset="UTF-8">
      <meta name="viewport" content="width=device-width, initial-scale=1">

      <meta property="og:title" content="Markup Highlighting Example">
      <meta property="og:url" content="https://example.com">
      <meta property="og:description" content="Markup highlighting example">
      <meta property="og:image" content="images/featured-image.jpg">
      <meta property="og:site_name" content="Feather Highlight">
      <meta name="title" content="Markup Example">
      <meta name="description" content="Markup highlighting example">

      <link rel="shortcut icon" href="https://example.com/images/icon.png">
      <link rel="icon" href="https://example.com/images/icon.png">
      <link rel="apple-touch-icon" sizes="152x152" href="https://example.com/images/apple-touch-icon.png">
      <link rel='dns-prefetch' href='//s.w.org' />

      <title>Markup</title>

      <script src="./main.js"></script>
      <script src="https://example.com/library.js"></script>

      <script>
        <![CDATA[
          <message> CDATA section </message>
        ]]>
      </script>

      <!-- Embed styles -->
      <style>
        /* Define variables */
        :root {
          --text-color: #333;
        }

        @font-face {
          font-family: 'Roboto';
          font-style: normal;
          font-weight: 300;
          font-display: swap;
          src: url(https://fonts.gstatic.com/s/roboto/v20/KFOlCnqEu92Fr1MmSU5fCRc4EsA.woff2) format('woff2');
          unicode-range: U+0460-052F, U+1C80-1C88, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
        }

        body
        {
          color: var( --text-color );
          padding: 0 !important;
        }

        #container {
          padding: 2rem 2rem 4rem;
        }

        @media ( max-width: 1200px ) {
          #toc {
            padding: 1rem;
          }
        }
      </style>
    </head>
    <body>
    <header id="main-header" class="l-masthead p-masthead">
      <div class="p-branding" style="margin-right: 2px; border: 1px solid #ccc; font-family: 'Times New Roman', serif;">
        <span class="p-branding__logo">
          <a
            href="https://example.com/"
            class="custom-logo-link"
            rel="home"
          >
              <img width="167" height="54" src="https://example.com/images/logo-white-small.png" class="custom-logo" alt="Branding Logo">
          </a>
        </span>
      </div>

      <nav id="main-navigation" class="p-navigation">
        <div class="menu-main-container">
          <ul id="header-navigation-list" class="p-navigation__list">
            <li id="menu-item-1" class="menu-item menu-item-1">
              <a href="https://example.com" aria-current="page">Home</a></li>
            <li id="menu-item-2" class="menu-item menu-item-2">
              <a href="https://example.com/category/documents/">Documents</a>
            </li>
            <li id="menu-item-3" class="menu-item menu-item-3">
              <a target="_blank" rel="noopener noreferrer" href="https://github.com/">GitHub</a>
            </li>
          </ul>
        </div>
      </nav>
    </header>

    <main id="main" class="p-main">
      <section class="p-section">
        <h2>Demo</h2>
        <p>
          Here is a very <strong>simple</strong> example:
        </p>
        <div class="p-example__splide">
          <div
            id="example"
            class="p-example"
            data-options='{"height":"9rem","breakpoints":{"600":{"height":"6rem"}}}'
          >
          </div>
        </div>
      </section>
    </main>

    <script>
      // Small script code
      const main = document.getElementById( 'main' );
      main.addEventListener( 'click', function () {
        console.log( 'clicked' );
      } );
    </script>
    </body>
    </html>