#Import

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

#Relevant links

• Source code
• Docs code

#code and pre tag usage

Both code and pre tags are styled:

Code Syntax

<Flex.Stack>
  <P>
    My <Code>formatted text</Code> inside a paragraph
  </P>

  <Section
    surface="dark"
    innerSpace={{
      block: 'small',
    }}
  >
    <P>
      My <Code>formatted text</Code> inside a paragraph on dark surface
    </P>
  </Section>

  <pre className="dnb-pre">Code Syntax</pre>
</Flex.Stack>

#Code and Typography

<code> and <pre> use the DNBMono font:

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

#Code and Syntax highlighting

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

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

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