Menu icon Foundation
Can I style syntax using Foundation alone?

I'm trying to build out my internal style guides using Foundation and would like to drop in some syntax example blocks. However, the pre, code structure doesn't seem to work. I'd really appreciate any help you could give.

<pre>
  <code class="language-html">
    <div class="code-container">
      <span class="tag">&lt;<span class="title">div class="card"</span>&gt;</span>
      <span class="tag">&lt;<span class="title">div</span>&gt;</span>
    </div>
  </code>
</pre>
            

         

syntaxstylingcodepre

I'm trying to build out my internal style guides using Foundation and would like to drop in some syntax example blocks. However, the pre, code structure doesn't seem to work. I'd really appreciate any help you could give.

<pre>
  <code class="language-html">
    <div class="code-container">
      <span class="tag">&lt;<span class="title">div class="card"</span>&gt;</span>
      <span class="tag">&lt;<span class="title">div</span>&gt;</span>
    </div>
  </code>
</pre>
            

         
Karl Ward about 5 years ago

The above should by default display as a red 'consolas' font no? There are a few settings for code in your Foundation settings file:

// We use these to style <code> tags
// $code-color: scale-color($alert-color, $lightness: -27%);
// $code-font-family: Consolas, 'Liberation Mono', Courier, monospace;
// $code-font-weight: bold;

If you want to extend the styling, you need to apply it separately.