Code and Syntax highlighting

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

  • @dnb/eufemia/style/themes/theme-ui/prism/dnb-prism-theme.js

You find the theme and its definitions in the GitHub repository.

Code and Pre Tag usage

Styling for both the <code> and the <pre> tags are build in the @dnb/eufemia.

So simply use them for your code syntax:

<p class="dnb-p">
My <code class="dnb-code">formatted text</code> inside a paragraph
<pre class="dnb-pre">
Code Syntax

Code and Typography

When you use <code> or <pre> – the DNB DNBMono font is used, like so:

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