hugo-theme-anubis2/exampleSiteMultilingual/content/posts/demo-code-pre-kbd-mark.md

+++ author = "Hugo Authors" title = "Demo - Support for code, pre, kbd, mark" date = "2024-04-30" description = "Guide to advanced usage of Anubis2" tags = [ "emoji", ] +++

Individual support for code, pre, kbd, mark

code

pre

CRTL + K + B + D

Feel free to switch between the light and dark themes to see the rendering differences.

Support for <code> tag

Direct Code

A verrrrrryyyyy llloooonnnggg coooodeeee

code is here

multiline
code
here

// ```typescript
interface User {
  id: number
  firstName: string
  lastName: string
  role: string
}

// ```typescript {linenos=inline}
function updateUser(id: number, update: Partial<User>) {
  const user = getUser(id)
  const newUser = { ...user, ...update }
  saveUser(id, newUser)
}

// ```typescript {linenos=true}
function updateUser(id: number, update: Partial<User>) {
  const user = getUser(id)
  const newUser = { ...user, ...update }
  saveUser(id, newUser)
}

Support for <pre> tag

pre text

pre text

pre text

Support for <kbd> tag

Press CTRL + C to copy text (Windows).

Press CMD + C to copy text (Mac OS).

Press CTRL+ALT+Delete to end the session.

Support for <mark> tag

Most salamanders are nocturnal, and hunt for insects, worms, and other small creatures. Most salamanders are nocturnal, and hunt for insects, worms, and other small creatures.

Most salamanders are nocturnal, and hunt for insects, worms, and other small creatures.

Support for <kbd> in <pre>

This is a KBD inside a pre. 

Support for <kbd> in <code> (❌ Should not be used)

This is a KBD inside a code.

Support for <code> in <pre> (❌ Should not be used)

This is a CODE inside a pre. 

Support for <code> in <kbd> (❌ Should not be used)

This is a CODE inside a kbd.

Support for <pre> in <kbd> (❌ Should not be used)

This is a

PRE

inside a kbd.

Support for <pre> in <code> (❌ Should not be used)

This is a

PRE

inside a code.

Support for <mark> in <kbd>

This is a MARK inside a kbd.

Support for <mark> in <code>

This is a MARK inside a code.

Support for <mark> in <pre>

This is a MARK inside a pre.