Front W - Pattern Library

Code Example 

<pre>
  <code class="language-html">
    
      <span class="tag">&lt;<span class="name">pre</span> <span class="attr">class</span>=<span class="string">"code-example__pre"</span>&gt;</span>
      <span class="tag">&lt;<span class="name">code</span> <span class="attr">class</span>=<span class="string">"code-example"</span>&gt;</span>
      <span class="tag">&lt;<span class="name">your</span> <span class="attr">special</span> <span class="attr">code</span> <span class="attr">here</span>&gt;</span>
      Maybe some html tags?
      <span class="tag">&lt;<span class="name">link</span> <span class="attr">rel</span>=<span class="string">"stylesheet"</span> <span class="attr">href</span>=<span class="string">"https://hs-duesseldorf.de"</span>&gt;</span>
      <span class="tag">&lt;<span class="name">script</span> <span class="attr">src</span>=<span class="string">"https:/hs-duesseldorf.de"</span>&gt;</span><span class="tag">&lt;/<span class="name">script</span>&gt;</span>
      <span class="tag">&lt;/<span class="name">code</span>&gt;</span>
      <span class="tag">&lt;/<span class="name">pre</span>&gt;</span>
    
  </code>
</pre>
 
<pre>
  <code class="language-{{ lang }}">
    {{ content }}
  </code>
</pre>
 
{
  "lang": "html",
  "content": "\n      <span class=\"tag\">&lt;<span class=\"name\">pre</span> <span class=\"attr\">class</span>=<span class=\"string\">\"code-example__pre\"</span>&gt;</span>\n      <span class=\"tag\">&lt;<span class=\"name\">code</span> <span class=\"attr\">class</span>=<span class=\"string\">\"code-example\"</span>&gt;</span>\n      <span class=\"tag\">&lt;<span class=\"name\">your</span> <span class=\"attr\">special</span> <span class=\"attr\">code</span> <span class=\"attr\">here</span>&gt;</span>\n      Maybe some html tags?\n      <span class=\"tag\">&lt;<span class=\"name\">link</span> <span class=\"attr\">rel</span>=<span class=\"string\">\"stylesheet\"</span> <span class=\"attr\">href</span>=<span class=\"string\">\"https://hs-duesseldorf.de\"</span>&gt;</span>\n      <span class=\"tag\">&lt;<span class=\"name\">script</span> <span class=\"attr\">src</span>=<span class=\"string\">\"https:/hs-duesseldorf.de\"</span>&gt;</span><span class=\"tag\">&lt;/<span class=\"name\">script</span>&gt;</span>\n      <span class=\"tag\">&lt;/<span class=\"name\">code</span>&gt;</span>\n      <span class=\"tag\">&lt;/<span class=\"name\">pre</span>&gt;</span>\n    "
}