🎨 Styling & Themes

You can add custom styles using the css viewer, see Viewers but you can also add a theme property to a documents frontmatter like so:

<!-- data
title: 🎨 Styling & Themes
theme: https://cdnjs.cloudflare.com/ajax/libs/highlight.js/10.7.2/styles/solarized-light.min.css
-->

jsplugincollapsetype=viewerof=codetheme

const themes = [
  "",
  "a11y-dark",
  "a11y-light",
  "agate",
  "an-old-hope",
  "androidstudio",
  "arduino-light",
  "arta",
  "ascetic",
  "atom-one-dark",
  "atom-one-dark-reasonable",
  "atom-one-light",
  "brown-paper",
  "codepen-embed",
  "color-brewer",
  "dark",
  "default",
  "devibeans",
  "docco",
  "far",
  "foundation",
  "github",
  "github-dark",
  "github-dark-dimmed",
  "gml",
  "googlecode",
  "gradient-dark",
  "gradient-light",
  "grayscale",
  "hybrid",
  "idea",
  "ir-black",
  "isbl-editor-dark",
  "isbl-editor-light",
  "kimbie-dark",
  "kimbie-light",
  "lightfair",
  "lioshi",
  "magula",
  "mono-blue",
  "monokai",
  "monokai-sublime",
  "night-owl",
  "nnfx-dark",
  "nnfx-light",
  "nord",
  "obsidian",
  "paraiso-dark",
  "paraiso-light",
  "pojoaque",
  "purebasic",
  "qtcreator-dark",
  "qtcreator-light",
  "rainbow",
  "routeros",
  "school-book",
  "shades-of-purple",
  "srcery",
  "stackoverflow-dark",
  "stackoverflow-light",
  "sunburst",
  "tomorrow-night-blue",
  "tomorrow-night-bright",
  "vs",
  "vs2015",
  "xcode",
  "xt256",
];

const endpoint = (theme) =>
  `//cdn.jsdelivr.net/gh/highlightjs/cdn-release@11.0.0/build/styles/${theme}.min.css`;

export const viewer = ({ node, React }) => {
  const { useState } = React;
  const [theme, setTheme] = useState(node.data.value);
  const change = (ev) => setTheme(ev.target.value.trim());
  return (
    <div>
      <select value={theme} onChange={change}>
        {themes.map((t) => {
          return (
            <option
              selected={theme === t ? "selected" : false}
              key={t}
              value={t}
            >
              {t || "Select Theme"}
            </option>
          );
        })}
      </select>
      {theme && <link rel="stylesheet" href={endpoint(theme)} />}
      {theme && <div>{"Theme url: " + endpoint(theme)}</div>}
    </div>
  );
};

codetheme

Theme url: //cdn.jsdelivr.net/gh/highlightjs/cdn-release@11.0.0/build/styles/sunburst .min.css

cssplugintype=theme

body {
  --bg: #000000;
  --bg-secondary-color: #333333;
  --text-color: lightgrey;
  --text-primary-color: orange;
  --text-secondary-color: #333333;
  --divider-subtle: #333333;
  --code-bg-color: #111;
}

stylcollapse< ../client/style.styl

body
    max-width 1024px
    margin 0 auto
    --bg: white
    --bg-secondary-color: #efefef;
    
    --text-color: black
    --text-secondary-color: grey
    --text-primary-color: #9999f7
    --text-highlight-bg: yellow
    --text-highlight-color: black;
    --divider-subtle: #efefef
    --medium-space: 0.4em

    --code-bg-color: black;
    --code-text-color: #efefef;
    --code-active-bg: #333;
    --code-active-text: white;
    --code-highlight-bg: var(--text-primary-color);
    --code-highlight-text: var(--text-highlight-color);

    --box-bg-opacity: 0.05;

    color: var(--text-color)
    background-color: var(--bg)

h1
    font-size: 1.7em
h2
    font-size: 1.4em
h3
    font-size: 1.2em
h4
    font-size: 1.1em
h5
    font-size: 1em
h6 
    font-size: 0.8em
    text-transform: uppercase

blockquote
    padding: 0 1em;
    border-left: 3px solid var(--text-secondary-color);
    margin: 0;
    color: var(--text-secondary-color);

a[wikilink="true"]
    text-decoration: none

    &:before,
    &:after
        color: var(--text-secondary-color)
    &:before 
        content: '['
    &:after 
        content: ']'

a > .linkIcon 
    display: inline
    padding-right: 0.3em
    padding-left: 0.3em

a
    text-decoration: none
    color: var(--text-primary-color)

a.local:not(.exists) 
    color: red


// List styles
li > p:first-child
    margin: 0

.task-list-item
    list-style: none
    margin-left: -1.5em

@import "styles/header"

#xxxxx content [id]:before
    content: ''
    display: inline-block
    height: 50px
    margin-top: -50px
    visibility: hidden
    pointer-events: none

:target {
  background-color: transparent;
  animation: highlight 1000ms ease-out;
}
@keyframes highlight {
  0% {
    background-color: var(--text-highlight-bg);
  }
  100% {
    background-color: transparent;
  }
}

.cell-content
    overflow: hidden

section, .cell, .codecell
    display: block

section
    border-width: 0 1px
    border-style: dashed
    border-color: transparent
    border-right-width: 0
    margin-left: 2px

    section
        margin: 0 0 -3px
    
    .cell
        margin-left: -3px
    
    &:before,
    &:after
        display: block
        width: 4px
        border-bottom: 1px solid transparent
        content: "."
        color: transparent
        height: 0

    &.selected
        border-color: var(--text-primary-color)
        border-right-color: transparent

        &:before,
        &:after
            display: block
            width: 4px
            border-bottom: 1px solid var(--text-primary-color) 
            content: "."
            color: transparent
            height: 0


@import "styles/cell"
@import "styles/codecell"

.cell, .codecell
    position: relative
    @import "./styles/cellmenu"

@import "styles/viewers"

#backlinks,
.footnotes
    padding: 0 1em;

stylcollapse< ../client/styles/cell.styl

.cell
    cell-border-width = 1px 3px
    cell-border-color = var(--text-primary-color)

    padding: 0.6em
    margin: 0
    border-color: transparent
    border-style: solid
    border-width: cell-border-width
        
    .cell-content > *:first-child
        margin-top 0

    .cell-content > *:last-child
        margin-bottom: 0
    
    &.selected
        border-color: cell-border-color
    
    &.editing
        padding: 0

    &.executing
        border-color: #33cc33 

    &:not(.code)
        code
            border: 1px solid #00000012;
            padding: 0 0.2em;
            background-color: #00000005;
            border-radius: 2px;
        pre 
            margin: 0.4em 0
        
            & > code 
                border: 0 none;
                padding: 0.4em;
                background-color: black;
                border-radius: 0;

.cell.code + .cell.output
    padding-top: 0

stylcollapse< ../client/styles/codecell.styl

pre
    white-space: pre-wrap
    margin: 0
    padding: 0

    code
        margin: 0
        padding: var(--medium-space)
        min-height: 1em

a.codecell-anchor 
    outline: 0
    text-decoration: none
    color: inherit

.codecell
    pre code
        display: block
        padding: var(--medium-space)
        background-color: var(--code-bg-color);
        color: var(--code-text-color);

    &.collapsed,
    &.dir-collapse:not(.uncollapsed)
        & > *:not(.meta)
            display: none !important

        & > .meta .lang:before
            display: inline-block
            content: "▸"
            padding-right: var(--medium-space)
        
        .dir-collapse
            display: none

    &.fullscreen
        position: fixed
        top: 2em
        bottom: 0
        left: 0
        right: 0
        z-index: 9999
        background-color: var(--bg, white);
        overflow: scroll
        box-sizing: border-box
        height: auto
        width: auto
        padding: 0.6em
        box-sizing: border-box;
        display: flex;
        flex-direction: column;

        & > iframe
            height: 100%

        .meta .directives .directive.dir-inline
            color: white
            background-color: green
    
    &.remote > .meta > .source 
        color: green
        font-weight: bold

    &.local > .meta > .source
        color: #ccc
        font-style: italic

    &.dir-hidemeta:not(.dir-showmeta),
    &.output.lang-md:not(.dir-showmeta),
    &.output.lang-lit:not(.dir-showmeta)
        & > .meta
            display: none
    
    &.dir-below > pre
        margin-bottom: var(--medium-space)

    &.dir-above > .meta
        margin-top: var(--medium-space)

    & > .meta
        font-family monospace
        display: block
        margin: 0.2em 0

        .lang
            font-weight bold
            margin-right var(--medium-space)
        
        .repl
            font-style: italic
            color: tint(black, 60%)
            margin-right var(--medium-space)

        .source,
        .output
            margin-right: var(--medium-space)

        .filename
            color: tint(black, 60%)
            margin-right var(--medium-space)
        
        .tag, .directive, .attribute
                display: inline-block
                padding: 0 var(--medium-space) 
                margin-right: var(--medium-space)
                border-radius 2px
                background-color: tint(black, 90%)
        .tag
            &:before
                content '#'
        .directive
            &:before
                content '!'
    & pre
        margin: 0
        padding: 0
        min-height: 1em
        white-space: pre-wrap

        & ~ *:not(.meta)
            margin-top: var(--medium-space)
    
    .updatedAt
        cursor pointer
        font-family: monospace
        font-size: 0.8em;
        color: #999
        text-align: right
        .Time
            font-weight: bold
    

// Code Mirror overrides

#lit-app .editor
    background-color: var(--code-bg-color)
    color: var(--code-text-color)

    .cm-content
        caret-color: var(--code-highlight-text)

    .cm-cursor
        border-left-color: var(--code-active-text)
    
    .cm-gutters
        background-color: var(--code-bg-color)
        color: var(--text-secondary-color)
        border-right-color: var(--text-secondary-color)

        .cm-activeLineGutter
            background-color: var(--code-active-bg)
            color: var(--code-active-text)

    .cm-activeLine.cm-line
        background-color: var(--code-active-bg)
        color: var(--code-active-text)
    
    .cm-matchingBracket
        color: var(--text-primary-color)

    .cm-focused
        outline: 0 none
    
    .cm-selectionBackground
        background: var(--code-highlight-bg)

    .cm-tooltip
        background-color: var(--code-bg-color)
        border-color: var(--text-secondary-color)
        color: var(--code-text-color)

        ul li[aria-selected]
            background: var(--code-highlight-bg)

    .cm-completionIcon-link:after
        content: '🔗'

.codecell.dir-error pre
  border: 2px solid red

stylcollapse< ../client/styles/cellmenu.styl

    & > menu
        margin: 0;
        padding: 0;
        z-index: 99999;
        position: absolute;
        top: 0.5em;
        left: 0;
        right: 0;
        bottom: 0.5em;
        display: flex;
        place-items: flex-end;
        pointer-events: none;

        .menu__items
            list-style: none
            margin: 0
            padding: 0;
            pointer-events: none;
            position: sticky;
            bottom: 50%;
            display: flex;
            justify-content: flex-end;
            width: 100%;
            flex-direction: row;
            gap: 0.5em;
            padding-right: 0.5em;

            li 
                background-color: var(--text-primary-color);
                width: 2em;
                height: 2em;
                border-radius: 1em;
                overflow: hidden;
                margin: 0 .25em;
                display: flex;
                align-items: center;
                justify-content: center;
                cursor: pointer;
                pointer-events: all;
                color: var(--bg);
                line-height: 1;

stylcollapse< ../client/styles/header.styl

.lit-message
    background-color: #ff0000b3
    border-bottom: 1px solid #c32d2d
    font-family: monospace;
    color: white
    padding: 0.4em
    overflow: scroll;

    .message
        overflow: hidden
        flex: 1
        white-space: pre-wrap;
        cursor: pointer;
        display: block;

    &:not(.showall)
        display: flex
        .message
            white-space: nowrap
            text-overflow: ellipsis

    .name
        cursor: pointer
        margin-left: 0.4em
        text-decoration: underline

    .close 
        padding: 0 var(--medium-space);
        cursor: pointer;

#lit-header
    top: 0
    position: sticky
    background-color: var(--bg)
    z-index: 99999

    *[disabled] 
        opacity: 0.5
        font-style: italic
        cursor: default

    menu
        margin: 0
        padding: 0
        display: flex
        flex-direction: row
        position relative
        white-space: nowrap

        &.right
            margin-left: auto
            & > .MenuItems
                right: 0
                left: auto

        .MenuTitle
            list-style: none
            cursor: pointer
            display: flex
            padding-right: 0.6em

        .MenuItems
            list-style: none
            cursor: pointer
            display: flex
            flex-direction: column
            flex-grow: 1;

            .meta
                font-size: 0.6em
                font-style: normal

        &.open > .MenuTitle
            // font-weight: bold
        
        &:not(.horizontal) > .MenuItems 
            & > * 
                padding-top: 0.4em
                &:first-child 
                    padding-top: 0

            & > menu
                display: flex
                flex-direction: column

                & > .MenuTitle:after
                    padding: 0 .4em
                    content: '\203A'

                &.open > .MenuTitle:after
                    transform: rotate(90deg)

                & > .MenuItems
                    position: static
                    padding-top: 0.4em

                    & > *
                        padding-left: 0.4em
                        border-left: 3px solid var(--text-primary-color)

        &.open:not(.horizontal)

            & > .MenuItems
                position: absolute
                top: 1.6em
                background-color: var(--bg)
                padding: 0.6em
                margin: 0 -0.6em
                box-shadow: 0 3px 3px rgba(0,0,0,0.2)
                min-width: 100%
                padding-top: 0;

        &.horizontal
            display: flex
            flex-direction: row
            padding: 0.6em
            border-bottom: 1px solid var(--divider-subtle)

            & > li 
                flex-direction: row

.led 
    display: inline-block
    width: 0.6em
    height: 0.6em
    border-radius: 0.6em
    margin-top: 0.4em
    background-color: var(--bg-secondary-color)
    box-shadow: 0 0 0 0.1em var(--bg);
    margin-left: 0.2em;

.led-green
    background-color: #33cc33

.led-orange
    background-color: orange

.led-blue
    background-color: #9999f7

.led-red
    background-color: red

Viewers

see examples

stylcollapse< ../client/styles/viewers.styl


.codecell > iframe 
  display: block
  width: 100%

.codecell img 
  display: block
  max-width: 100%

.cell:not(.selected) .codecell iframe 
    pointer-events: none


.codecell > table
  border-collapse: collapse
  border: 1px solid var(--divider-subtle)
  
  td
    padding: 0.4em

.md-block.dir-note, 
.md-block.dir-info,
.md-block.dir-warn,
.md-block.dir-box,
.md-block.dir-success,
.md-block.dir-error
  position relative
  color: var(--text-color);
  padding: var(--medium-space);
  border: 1px solid var(--divider-subtle);
  border-radius: 2px;

.md-block.dir-note, 
.md-block.dir-info,
.md-block.dir-warn,
.md-block.dir-box,
.md-block.dir-success,
.md-block.dir-error
  &:before
    content: "";
    width: 100%;
    height: 100%;
    position: absolute;
    left: 0;
    background-color: var(--bg);
    opacity: var(--box-bg-opacity, 0.15);
    top: 0;
    z-index: -1;

.md-block > *:first-child { margin-top:0; }
.md-block > *:last-child { margin-bottom:0; }

.md-block.dir-note
  &:before 
    background-color: yellow;

.md-block.dir-error
  color: red;
  border-color: red;
  &:before 
    background-color: red;

.md-block.dir-warn
  border-color: orange;
  &:before 
    background-color: orange;

.md-block.dir-info 
  border-color: blue;
  &:before 
    background-color: blue;

.md-block.dir-success
  border-color: green;
  &:before 
    background-color: green;

🎨 Styling & Themes

Viewers

Backlinks (2)