@favware/syntax-highlighter-core/dist/collection/components/syntax-highlighter.css

A lightweight, easy-to-use and framework agnostic syntax highlighter for your code snippets.

@charset "UTF-8";
syntax-highlighter .syntaxhighlighter__hidden {
  display: none;
}
syntax-highlighter pre {
  border-radius: 5px;
}
syntax-highlighter div.syntaxhighlighter__code-toolbar {
  position: relative;
}
syntax-highlighter div.syntaxhighlighter__code-toolbar > .syntaxhighlighter__toolbar {
  position: absolute;
  top: 0.3em;
  right: 0.2em;
  transition: opacity 0.3s ease-in-out;
  opacity: 0;
}
syntax-highlighter div.syntaxhighlighter__code-toolbar:hover > .syntaxhighlighter__toolbar {
  opacity: 1;
}
syntax-highlighter div.syntaxhighlighter__code-toolbar > .syntaxhighlighter__toolbar .syntaxhighlighter__toolbar-item {
  display: inline-block;
}
syntax-highlighter div.syntaxhighlighter__code-toolbar > .syntaxhighlighter__toolbar a {
  cursor: pointer;
}
syntax-highlighter div.syntaxhighlighter__code-toolbar > .syntaxhighlighter__toolbar button {
  background: none;
  border: 0;
  color: inherit;
  font: inherit;
  line-height: normal;
  overflow: visible;
  padding: 0;
  -webkit-user-select: none;
  /* for button */
  -moz-user-select: none;
  -ms-user-select: none;
}
syntax-highlighter div.syntaxhighlighter__code-toolbar > .syntaxhighlighter__toolbar a:hover,
syntax-highlighter div.syntaxhighlighter__code-toolbar > .syntaxhighlighter__toolbar a:focus,
syntax-highlighter div.syntaxhighlighter__code-toolbar > .syntaxhighlighter__toolbar button:hover,
syntax-highlighter div.syntaxhighlighter__code-toolbar > .syntaxhighlighter__toolbar button:focus,
syntax-highlighter div.syntaxhighlighter__code-toolbar > .syntaxhighlighter__toolbar span:hover,
syntax-highlighter div.syntaxhighlighter__code-toolbar > .syntaxhighlighter__toolbar span:focus {
  color: inherit;
  text-decoration: none;
}
syntax-highlighter .light {
  /**
   * prism.js default theme for JavaScript, CSS and HTML
   * Based on dabblet (http://dabblet.com)
   * @author Lea Verou
   */
  /* Code blocks */
  /* Inline code */
}
syntax-highlighter .light code[class*='language-'],
syntax-highlighter .light pre[class*='language-'] {
  color: black;
  background: none;
  text-shadow: 0 1px white;
  font-family: 'Fira Code', 'Cascadia Code', 'Meslo NGF', Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', 'Courier New', Courier, monospace;
  text-align: left;
  white-space: pre;
  word-spacing: normal;
  word-break: normal;
  word-wrap: normal;
  line-height: 1.5;
  -moz-tab-size: 4;
  -o-tab-size: 4;
  tab-size: 4;
  -webkit-hyphens: none;
  -moz-hyphens: none;
  -ms-hyphens: none;
  hyphens: none;
}
syntax-highlighter .light pre[class*='language-']::-moz-selection,
syntax-highlighter .light pre[class*='language-'] ::-moz-selection,
syntax-highlighter .light code[class*='language-']::-moz-selection,
syntax-highlighter .light code[class*='language-'] ::-moz-selection {
  text-shadow: none;
  background: #b3d4fc;
}
syntax-highlighter .light pre[class*='language-']::selection,
syntax-highlighter .light pre[class*='language-'] ::selection,
syntax-highlighter .light code[class*='language-']::selection,
syntax-highlighter .light code[class*='language-'] ::selection {
  text-shadow: none;
  background: #b3d4fc;
}
@media print {
  syntax-highlighter .light code[class*='language-'],
  syntax-highlighter .light pre[class*='language-'] {
    text-shadow: none;
  }
}
syntax-highlighter .light pre[class*='language-'] {
  padding: 1em;
  margin: 0.5em 0;
  overflow: auto;
}
syntax-highlighter .light :not(pre) > code[class*='language-'],
syntax-highlighter .light pre[class*='language-'] {
  background: #f5f2f0;
}
syntax-highlighter .light :not(pre) > code[class*='language-'] {
  padding: 0.1em;
  border-radius: 0.3em;
  white-space: normal;
}
syntax-highlighter .light .token.comment,
syntax-highlighter .light .token.prolog,
syntax-highlighter .light .token.doctype,
syntax-highlighter .light .token.cdata {
  color: slategray;
}
syntax-highlighter .light .token.punctuation {
  color: #999;
}
syntax-highlighter .light .namespace {
  opacity: 0.7;
}
syntax-highlighter .light .token.property,
syntax-highlighter .light .token.tag,
syntax-highlighter .light .token.boolean,
syntax-highlighter .light .token.number,
syntax-highlighter .light .token.constant,
syntax-highlighter .light .token.symbol,
syntax-highlighter .light .token.deleted {
  color: #905;
}
syntax-highlighter .light .token.selector,
syntax-highlighter .light .token.attr-name,
syntax-highlighter .light .token.string,
syntax-highlighter .light .token.char,
syntax-highlighter .light .token.builtin,
syntax-highlighter .light .token.inserted {
  color: #690;
}
syntax-highlighter .light .token.operator,
syntax-highlighter .light .token.entity,
syntax-highlighter .light .token.url,
syntax-highlighter .light .language-css .token.string,
syntax-highlighter .light .style .token.string {
  color: #9a6e3a;
  background: rgba(255, 255, 255, 0.5);
}
syntax-highlighter .light .token.atrule,
syntax-highlighter .light .token.attr-value,
syntax-highlighter .light .token.keyword {
  color: #07a;
}
syntax-highlighter .light .token.function,
syntax-highlighter .light .token.class-name {
  color: #dd4a68;
}
syntax-highlighter .light .token.regex,
syntax-highlighter .light .token.important,
syntax-highlighter .light .token.variable {
  color: #e90;
}
syntax-highlighter .light .token.important,
syntax-highlighter .light .token.bold {
  font-weight: bold;
}
syntax-highlighter .light .token.italic {
  font-style: italic;
}
syntax-highlighter .light .token.entity {
  cursor: help;
}
syntax-highlighter .light .syntaxhighlighter__code-toolbar pre {
  border-top: solid 10px #2170c4;
}
syntax-highlighter .light .syntaxhighlighter__code-toolbar .syntaxhighlighter__toolbar {
  opacity: 1;
}
syntax-highlighter .light .syntaxhighlighter__code-toolbar .syntaxhighlighter__toolbar .syntaxhighlighter__language-label,
syntax-highlighter .light .syntaxhighlighter__code-toolbar .syntaxhighlighter__toolbar .syntaxhighlighter__copy-button {
  color: white;
  font-size: 12px;
  font-weight: bolder;
  padding: 8px;
  background: #2170c4;
  box-shadow: none;
  border-radius: 5px;
  margin-right: 10px;
  font-family: 'Fira Code', 'Cascadia Code', 'Meslo NGF', Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', 'Courier New', Courier, monospace;
}
syntax-highlighter .light .syntaxhighlighter__code-toolbar .syntaxhighlighter__toolbar .syntaxhighlighter__language-label:hover {
  color: white;
}
syntax-highlighter .light .syntaxhighlighter__code-toolbar .syntaxhighlighter__toolbar .syntaxhighlighter__copy-button:before {
  content: '📋';
  margin-right: 2px;
}
syntax-highlighter .light .syntaxhighlighter__code-toolbar .syntaxhighlighter__toolbar .syntaxhighlighter__copy-button:hover {
  color: yellow;
}
syntax-highlighter .dark {
  /**
   * okaidia theme for JavaScript, CSS and HTML
   * Loosely based on Monokai textmate theme by http://www.monokai.nl/
   * @author ocodia
   */
  /* Code blocks */
  /* Inline code */
}
syntax-highlighter .dark code[class*='language-'],
syntax-highlighter .dark pre[class*='language-'] {
  color: #f8f8f2;
  background: none;
  text-shadow: 0 1px rgba(0, 0, 0, 0.3);
  font-family: 'Fira Code', 'Cascadia Code', 'Meslo NGF', Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', 'Courier New', Courier, monospace;
  text-align: left;
  white-space: pre;
  word-spacing: normal;
  word-break: normal;
  word-wrap: normal;
  line-height: 1.5;
  -moz-tab-size: 4;
  -o-tab-size: 4;
  tab-size: 4;
  -webkit-hyphens: none;
  -moz-hyphens: none;
  -ms-hyphens: none;
  hyphens: none;
}
syntax-highlighter .dark pre[class*='language-'] {
  padding: 1em;
  margin: 0.5em 0;
  overflow: auto;
  border-radius: 0.3em;
}
syntax-highlighter .dark :not(pre) > code[class*='language-'],
syntax-highlighter .dark pre[class*='language-'] {
  background: #272822;
}
syntax-highlighter .dark :not(pre) > code[class*='language-'] {
  padding: 0.1em;
  border-radius: 0.3em;
  white-space: normal;
}
syntax-highlighter .dark .token.comment,
syntax-highlighter .dark .token.prolog,
syntax-highlighter .dark .token.doctype,
syntax-highlighter .dark .token.cdata {
  color: slategray;
}
syntax-highlighter .dark .token.punctuation {
  color: #f8f8f2;
}
syntax-highlighter .dark .namespace {
  opacity: 0.7;
}
syntax-highlighter .dark .token.property,
syntax-highlighter .dark .token.tag,
syntax-highlighter .dark .token.constant,
syntax-highlighter .dark .token.symbol,
syntax-highlighter .dark .token.deleted {
  color: #f92672;
}
syntax-highlighter .dark .token.boolean,
syntax-highlighter .dark .token.number {
  color: #ae81ff;
}
syntax-highlighter .dark .token.selector,
syntax-highlighter .dark .token.attr-name,
syntax-highlighter .dark .token.string,
syntax-highlighter .dark .token.char,
syntax-highlighter .dark .token.builtin,
syntax-highlighter .dark .token.inserted {
  color: #a6e22e;
}
syntax-highlighter .dark .token.operator,
syntax-highlighter .dark .token.entity,
syntax-highlighter .dark .token.url,
syntax-highlighter .dark .language-css .token.string,
syntax-highlighter .dark .style .token.string,
syntax-highlighter .dark .token.variable {
  color: #f8f8f2;
}
syntax-highlighter .dark .token.atrule,
syntax-highlighter .dark .token.attr-value,
syntax-highlighter .dark .token.function,
syntax-highlighter .dark .token.class-name {
  color: #e6db74;
}
syntax-highlighter .dark .token.keyword {
  color: #66d9ef;
}
syntax-highlighter .dark .token.regex,
syntax-highlighter .dark .token.important {
  color: #fd971f;
}
syntax-highlighter .dark .token.important,
syntax-highlighter .dark .token.bold {
  font-weight: bold;
}
syntax-highlighter .dark .token.italic {
  font-style: italic;
}
syntax-highlighter .dark .token.entity {
  cursor: help;
}
syntax-highlighter .dark .syntaxhighlighter__code-toolbar pre {
  border-top: solid 10px #f26428;
  white-space: pre-wrap;
}
syntax-highlighter .dark .syntaxhighlighter__code-toolbar .syntaxhighlighter__toolbar {
  opacity: 1;
}
syntax-highlighter .dark .syntaxhighlighter__code-toolbar .syntaxhighlighter__toolbar .syntaxhighlighter__language-label,
syntax-highlighter .dark .syntaxhighlighter__code-toolbar .syntaxhighlighter__toolbar .syntaxhighlighter__copy-button {
  color: white;
  font-size: 12px;
  font-weight: bolder;
  padding: 8px;
  background: #f26428;
  box-shadow: none;
  border-radius: 5px;
  margin-right: 10px;
  font-family: 'Fira Code', 'Cascadia Code', 'Meslo NGF', Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', 'Courier New', Courier, monospace;
  border: none;
  cursor: pointer;
  text-decoration: underline;
  display: inline;
}
syntax-highlighter .dark .syntaxhighlighter__code-toolbar .syntaxhighlighter__toolbar .syntaxhighlighter__language-label:hover {
  color: white;
}
syntax-highlighter .dark .syntaxhighlighter__code-toolbar .syntaxhighlighter__toolbar .syntaxhighlighter__copy-button:before {
  content: '📋';
  margin-right: 2px;
}
syntax-highlighter .dark .syntaxhighlighter__code-toolbar .syntaxhighlighter__toolbar .syntaxhighlighter__copy-button:hover {
  color: #f9b038;
}