Add code syntax highlighter Highlight.js

[h-enk]

Resources

• How to use Highlight.js on a Next.js site
• Syntax Highlighting with Highlight.js and Next.js

[h-enk]

See aslo https://github.com/twbs/bootstrap/issues/3286#issuecomment-17540200:

pre {
    overflow-x: auto;
}

pre code {
    word-wrap: normal;
    white-space: pre;
}

[h-enk]

Bootstrap:

code,
kbd,
pre,
samp {
    font-family: var(--bs-font-monospace);
    font-size: 1em
}

pre {
    display: block;
    margin-top: 0;
    margin-bottom: 1rem;
    overflow: auto;
    font-size: .875em
}

pre code {
    font-size: inherit;
    color: inherit;
    word-break: normal
}

code {
    font-size: .875em;
    color: var(--bs-code-color);
    word-wrap: break-word
}

a>code {
    color: inherit
}

[h-enk]

https://github.com/h-enk/henkverlinde.com/issues/222