highlight-it/dist/styles/nnfx.css

A lightweight syntax highlighting library with themes, line numbers, and copy functionality

/*!
  Theme: nnfx light
  Description: a theme inspired by Netscape Navigator/Firefox
  Author: (c) 2020-2021 Jim Mason <jmason@ibinx.com>
  Maintainer: @RocketMan
  License: https://creativecommons.org/licenses/by-sa/4.0  CC BY-SA 4.0
  Updated: 2021-05-17

  @version 1.1.0
*/

/*!
  Theme: nnfx dark
  Description: a theme inspired by Netscape Navigator/Firefox
  Author: (c) 2020-2021 Jim Mason <jmason@ibinx.com>
  Maintainer: @RocketMan
  License: https://creativecommons.org/licenses/by-sa/4.0  CC BY-SA 4.0
  Updated: 2021-05-17

  @version 1.1.0
*/

pre code.hljs {
  display: block;
  overflow-x: auto;
  padding: 1em;
}

code.hljs {
  padding: 3px 5px;
}

:root {
  color: #fff;
}

.hljs-meta-string {
  font-weight: bold;
  font-style: italic;
  color: #69f;
}

.hljs-quote {
  font-style: italic;
  color: #9c6;
}

.hljs-built_in {
  color: #a7a;
}

.hljs-attr {
  font-weight: bold;
}

.hljs-string {
  font-weight: normal;
}

.hljs-meta .hljs-string,
.hljs-number,
.hljs-regexp,
.hljs-link {
  color: #bce;
}

.hljs-template-variable {
  color: #d40;
}

.hljs-class .hljs-title,
.hljs-type {
  font-weight: bold;
  color: #96c;
}

.hljs-function .hljs-title,
.hljs-attr,
.hljs-subst,
.hljs-tag {
  color: #fff;
}

.hljs-formula {
  font-style: italic;
}

.hljs-meta {
  color: #69f;
}

.hljs-selector-tag {
  font-weight: bold;
  color: #69f;
}

.hljs-selector-pseudo {
  font-style: italic;
}

.hljs-strong {
  font-weight: bold;
}

.hljs-emphasis {
  font-style: italic;
}

.highlightit-theme-light {
  color: #000;
  .hljs-meta-string {
    font-weight: bold;
    font-style: italic;
    color: #48b;
  }

  .hljs-quote {
    font-style: italic;
    color: #070;
  }

  .hljs-built_in {
    color: #808;
  }

  .hljs-attr {
    font-weight: bold;
  }

  .hljs-string {
    font-weight: normal;
  }

  .hljs-meta .hljs-string,
  .hljs-number,
  .hljs-regexp,
  .hljs-link {
    color: #00f;
  }

  .hljs-template-variable {
    color: #f40;
  }

  .hljs-class .hljs-title,
  .hljs-type {
    font-weight: bold;
    color: #639;
  }

  .hljs-function .hljs-title,
  .hljs-attr,
  .hljs-subst,
  .hljs-tag {
    color: #000;
  }

  .hljs-formula {
    background-color: #eee;
    font-style: italic;
  }

  .hljs-addition {
    background-color: #beb;
  }

  .hljs-deletion {
    background-color: #fbb;
  }

  .hljs-meta {
    color: #269;
  }

  .hljs-selector-tag {
    font-weight: bold;
    color: #48b;
  }

  .hljs-selector-pseudo {
    font-style: italic;
  }

  .hljs-strong {
    font-weight: bold;
  }

  .hljs-emphasis {
    font-style: italic;
  }
}

@media (prefers-color-scheme: light) {
  :root.highlightit-theme-auto {
    color: #000;
    .hljs-meta-string {
      font-weight: bold;
      font-style: italic;
      color: #48b;
    }

    .hljs-quote {
      font-style: italic;
      color: #070;
    }

    .hljs-built_in {
      color: #808;
    }

    .hljs-attr {
      font-weight: bold;
    }

    .hljs-string {
      font-weight: normal;
    }

    .hljs-meta .hljs-string,
    .hljs-number,
    .hljs-regexp,
    .hljs-link {
      color: #00f;
    }

    .hljs-template-variable {
      color: #f40;
    }

    .hljs-class .hljs-title,
    .hljs-type {
      font-weight: bold;
      color: #639;
    }

    .hljs-function .hljs-title,
    .hljs-attr,
    .hljs-subst,
    .hljs-tag {
      color: #000;
    }

    .hljs-formula {
      background-color: #eee;
      font-style: italic;
    }

    .hljs-addition {
      background-color: #beb;
    }

    .hljs-deletion {
      background-color: #fbb;
    }

    .hljs-meta {
      color: #269;
    }

    .hljs-selector-tag {
      font-weight: bold;
      color: #48b;
    }

    .hljs-selector-pseudo {
      font-style: italic;
    }

    .hljs-strong {
      font-weight: bold;
    }

    .hljs-emphasis {
      font-style: italic;
    }
  }
}

.highlightit-container[data-theme='light'],
.highlightit-container pre[data-theme='light'],
.highlightit-container code[data-theme='light'] {
  color: #000;
  .hljs-meta-string {
    font-weight: bold;
    font-style: italic;
    color: #48b;
  }

  .hljs-quote {
    font-style: italic;
    color: #070;
  }

  .hljs-built_in {
    color: #808;
  }

  .hljs-attr {
    font-weight: bold;
  }

  .hljs-string {
    font-weight: normal;
  }

  .hljs-meta .hljs-string,
  .hljs-number,
  .hljs-regexp,
  .hljs-link {
    color: #00f;
  }

  .hljs-template-variable {
    color: #f40;
  }

  .hljs-class .hljs-title,
  .hljs-type {
    font-weight: bold;
    color: #639;
  }

  .hljs-function .hljs-title,
  .hljs-attr,
  .hljs-subst,
  .hljs-tag {
    color: #000;
  }

  .hljs-formula {
    background-color: #eee;
    font-style: italic;
  }

  .hljs-addition {
    background-color: #beb;
  }

  .hljs-deletion {
    background-color: #fbb;
  }

  .hljs-meta {
    color: #269;
  }

  .hljs-selector-tag {
    font-weight: bold;
    color: #48b;
  }

  .hljs-selector-pseudo {
    font-style: italic;
  }

  .hljs-strong {
    font-weight: bold;
  }

  .hljs-emphasis {
    font-style: italic;
  }
}

.highlightit-container[data-theme='dark'],
.highlightit-container pre[data-theme='dark'],
.highlightit-container code[data-theme='dark'] {
  color: #fff;
  .hljs-meta-string {
    font-weight: bold;
    font-style: italic;
    color: #69f;
  }

  .hljs-quote {
    font-style: italic;
    color: #9c6;
  }

  .hljs-built_in {
    color: #a7a;
  }

  .hljs-attr {
    font-weight: bold;
  }

  .hljs-string {
    font-weight: normal;
  }

  .hljs-meta .hljs-string,
  .hljs-number,
  .hljs-regexp,
  .hljs-link {
    color: #bce;
  }

  .hljs-template-variable {
    color: #d40;
  }

  .hljs-class .hljs-title,
  .hljs-type {
    font-weight: bold;
    color: #96c;
  }

  .hljs-function .hljs-title,
  .hljs-attr,
  .hljs-subst,
  .hljs-tag {
    color: #fff;
  }

  .hljs-formula {
    background-color: #eee;
    font-style: italic;
  }

  .hljs-addition {
    background-color: #797;
  }

  .hljs-deletion {
    background-color: #c99;
  }

  .hljs-meta {
    color: #69f;
  }

  .hljs-selector-tag {
    font-weight: bold;
    color: #69f;
  }

  .hljs-selector-pseudo {
    font-style: italic;
  }

  .hljs-strong {
    font-weight: bold;
  }

  .hljs-emphasis {
    font-style: italic;
  }
}