Skip to content

Code

Code Highlighting with Prism

Prism is a popular Syntax Highlighting tool. DNB has its own theme You can use:

  • dnb-ui-lib/style/themes/theme-ui/prism/dnb-prism-theme.js

Code and Pre Tag usage

Styling for both the <code> and the <pre> tags are build in the dnb-ui-lib. So simply use them in Your Syntax:

<p class="dnb-p">
My <code class="dnb-code">Formatted example</code> in a Paragraph
</p>
<pre class="dnb-pre">
One line
New lines
</pre>

Code and Typography

<code> snippets look best when rendered in a Monotype font. Developers will normally have installed some of these fonts on their devices. Here is an example of CSS font-family usage:

font-family: var(--font-family-monospace);