Skip to content

Code

Import

import { Code } from '@dnb/eufemia/elements'

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 can 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
</p>
<pre class="dnb-pre">
Code Syntax
</pre>

Code and Typography

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

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