Code Blocks . Scriptura

pre.pre > code

   OxxO
  X oo X
  X >< X
   XXXX~<>
 (..)(..)

code(data-select='Sélectionner et copier')

   OxxO
  X oo X
  X >< X
   XXXX~<>
 (..)(..)

code(data-select)

echo 'Single line content';

code:empty

code(data-code='HTML')

<!DOCTYPE html>
<html lang="fr" class="no-js">
  <head>
    <meta charset="utf-8">
    <title>a title</title>
    <!-- a comment... -->
  </head>
  <body>
    <header></header>
    <main>
      <article>a content</article>
    </main>
    <aside></aside>
    <footer></footer>
  </body>
</html>

/* a comment... */

:root {
  color-scheme: dark;
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  -webkit-text-size-adjust: 100%;
  color: #e9dac5;
  background-color: #393939;
  font-family: 'Noto Sans', sans-serif;
  line-height: 1.5;
  @media (prefers-reduced-motion: no-preference) {
    scroll-behavior: smooth;
  }
}

// a comment...
const startPage = (() => {
  const html = document.documentElement,
        c = 'start-map'
  html.classList.add(c)
  window.addEventListener('load', function() {
    setTimeout(() => {
      html.classList.remove(c)
    }, 1500)
  })
})()

// a comment...
.accordion
  display: flex
  flex-direction: column
  gap: .5em 0
  & > * > :first-child
    box-sizing: border-box
    display: flex
    align-items: center
    width: 100%

// a comment...

extends patternLayout

block variables
  - const documentType = 'articles'

block main
  h1.main-heading!= data._name
  .column4.gap
    each e in data
      article.card
        h2.h2!= e._name
        a(href='/article/' + e._id)
          svg
            use(href='/sprites/util.svg#test')
        p!= e._description

La coloration syntaxique du code s'appuie sur la bilbiothèque Prism.js.