@use "../functions" as fun; @use "../mixins" as mix; %prism { .code-toolbar { --toolbar-height: #{fun.convert-px(100)}; position: relative; margin-top: calc(var(--toolbar-height) + var(--spacing-sm)); @include mix.media("screen") { @include mix.dimensions("2xs") { --toolbar-height: #{fun.convert-px(60)}; } } .toolbar { display: flex; flex-flow: row wrap; justify-content: center; width: 100%; height: var(--toolbar-height); position: absolute; top: calc(var(--toolbar-height) * -1); left: 0; right: 0; background: var(--color-bg-tertiary); border: fun.convert-px(1) solid var(--color-border); } .toolbar-item { display: flex; align-items: center; margin: 0 var(--spacing-2xs); } .toolbar-item:nth-child(1) { flex: 0 0 100%; justify-content: center; margin: 0 auto 0 0; padding: 0 var(--spacing-sm); background: var(--color-bg-code); border-bottom: fun.convert-px(1) solid var(--color-border); color: var(--color-primary-darker); font-size: var(--font-size-sm); font-weight: 600; @include mix.media("screen") { @include mix.dimensions("2xs") { flex: 0 0 auto; justify-content: left; border-bottom: none; border-right: fun.convert-px(1) solid var(--color-border); } } } } .copy-to-clipboard-button, .prism-color-scheme-button { display: block; padding: fun.convert-px(3) var(--spacing-xs); background: var(--color-bg); border: 0.4ex solid var(--color-primary); border-radius: fun.convert-px(30); box-shadow: fun.convert-px(1) fun.convert-px(1) fun.convert-px(1) var(--color-shadow), fun.convert-px(1) fun.convert-px(2) fun.convert-px(2) fun.convert-px(-2) var(--color-shadow), fun.convert-px(3) fun.convert-px(4) fun.convert-px(5) fun.convert-px(-4) var(--color-shadow); color: var(--color-primary); font-size: var(--font-size-sm); font-weight: 600; transition: all 0.35s ease-in-out 0s; &:hover, &:focus { transform: translateX(#{fun.convert-px(-2)}) translateY(#{fun.convert-px(-2)}); box-shadow: fun.convert-px(1) fun.convert-px(1) fun.convert-px(1) var(--color-shadow-light), fun.convert-px(1) fun.convert-px(2) fun.convert-px(2) fun.convert-px(-2) var(--color-shadow-light), fun.convert-px(3) fun.convert-px(4) fun.convert-px(5) fun.convert-px(-4) var(--color-shadow-light), fun.convert-px(4) fun.convert-px(7) fun.convert-px(8) fun.convert-px(-3) var(--color-shadow-light); } &:focus { text-decoration: underline var(--color-primary) fun.convert-px(3); } &:active { text-decoration: none; transform: translateY(#{fun.convert-px(2)}); box-shadow: 0 0 0 0 var(--color-shadow); } } pre[class*="language-"] { --gutter-size-with-spacing: calc(var(--gutter-size) + var(--spacing-xs)); padding: 0; position: relative; overflow: auto; background: var(--color-bg-secondary); border: fun.convert-px(1) solid var(--color-border-light); color: var(--color-fg); hyphens: none; tab-size: 4; text-align: left; white-space: pre; word-spacing: normal; word-break: normal; word-wrap: normal; &.command-line { --gutter-size: 19ch; padding-left: var(--gutter-size-with-spacing); } &.line-numbers { --gutter-size: 6ch; counter-reset: linenumber; padding-left: var(--gutter-size-with-spacing); } code { display: block; padding: var(--spacing-xs) 0; position: relative; } .line-numbers-rows, .command-line-prompt { display: block; width: var(--gutter-size); padding: var(--spacing-xs) 0; position: absolute; top: 0; left: calc(var(--gutter-size-with-spacing) * -1); background: var(--color-bg); border-right: fun.convert-px(1) solid var(--color-border); font-size: 100%; letter-spacing: -1px; text-align: right; pointer-events: none; user-select: none; > span { &::before { display: block; padding-right: var(--spacing-xs); color: var(--color-fg-light); } } } .command-line-prompt { > span { &::before { content: " "; } &[data-user]::before { content: "[" attr(data-user) "@" attr(data-host) "] $"; } &[data-user="root"]::before { content: "[" attr(data-user) "@" attr(data-host) "] #"; } &[data-prompt]::before { content: attr(data-prompt); } &[data-continuation-prompt]::before { content: attr(data-continuation-prompt); } } } .line-numbers-rows { > span { counter-increment: linenumber; &::before { content: counter(linenumber); } } } .token { &.comment, &.doc-comment { color: var(--color-fg-light); } &.punctuation { color: var(--color-fg); } &.attr-name, &.hexcode, &.inserted, &.string { color: var(--color-token-green); } &.class, &.coord, &.id, &.function { color: var(--color-token-purple); } &.builtin, &.builtin.class-name, &.property-access, &.regex, &.scope { color: var(--color-token-magenta); } &.class-name, &.constant, &.global, &.interpolation, &.key, &.package, &.this, &.title, &.variable { color: var(--color-token-blue); } &.combinator, &.keyword, &.operator, &.pseudo-class, &.pseudo-element, &.rule, &.selector, &.unit { color: var(--color-token-orange); } &.attr-value, &.boolean, &.number { color: var(--color-token-yellow); } &.delimiter, &.doctype, &.parameter, &.parent, &.property, &.shebang, &.tag { color: var(--color-token-cyan); } &.deleted { color: var(--color-token-red); } &.punctuation.brace-hover, &.punctuation.brace-selected { background: var(--color-bg); outline: solid fun.convert-px(1) var(--color-primary-light); } &.output { user-select: none; } } span.inline-color-wrapper { background: url(fun.encode-svg( '' )); /* Prevent glitches where 1px from the repeating pattern could be seen. */ background-position: center; background-size: 110%; display: inline-block; height: 1.1ch; width: 1.1ch; margin: 0 0.5ch 0 0; border: fun.convert-px(1) solid var(--color-bg); outline: fun.convert-px(1) solid var(--color-border-dark); overflow: hidden; } span.inline-color { display: block; /* To prevent visual glitches again */ height: 120%; width: 120%; } } } } /* Name.Attribute */ .highlight .nb { color: #003388 } /* Name.Builtin */ .highlight .nc { color: #bb0066; font-weight: bold } /* Name.Class */ .highlight .no { color: #003366; font-weight: bold } /* Name.Constant */ .highlight .nd { color: #555555 } /* Name.Decorator */ .highlight .ne { color: #bb0066; font-weight: bold } /* Name.Exception */ .highlight .nf { color: #0066bb; font-weight: bold } /* Name.Function */ .highlight .nl { color: #336699; font-style: italic } /* Name.Label */ .highlight .nn { color: #bb0066; font-weight: bold } /* Name.Namespace */ .highlight .py { color: #336699; font-weight: bold } /* Name.Property */ .highlight .nt { color: #bb0066; font-weight: bold } /* Name.Tag */ .highlight .nv { color: #336699 } /* Name.Variable */ .highlight .ow { color: #008800 } /* Operator.Word */ .highlight .w { color: #bbbbbb } /* Text.Whitespace */ .highlight .mb { color: #0000DD; font-weight: bold } /* Literal.Number.Bin */ .highlight .mf { color: #0000DD; font-weight: bold } /* Literal.Number.Float */ .highlight .mh { color: #0000DD; font-weight: bold } /* Literal.Number.Hex */ .highlight .mi { color: #0000DD; font-weight: bold } /* Literal.Number.Integer */ .highlight .mo { color: #0000DD; font-weight: bold } /* Literal.Number.Oct */ .highlight .sa { color: #dd2200; background-color: #fff0f0 } /* Literal.String.Affix */ .highlight .sb { color: #dd2200; background-color: #fff0f0 } /* Literal.String.Backtick */ .highlight .sc { color: #dd2200; background-color: #fff0f0 } /* Literal.String.Char */ .highlight .dl { color: #dd2200; background-color: #fff0f0 } /* Literal.String.Delimiter */ .highlight .sd { color: #dd2200; background-color: #fff0f0 } /* Literal.String.Doc */ .highlight .s2 { color: #dd2200; background-color: #fff0f0 } /* Literal.String.Double */ .highlight .se { color: #0044dd; background-color: #fff0f0 } /* Literal.String.Escape */ .highlight .sh { color: #dd2200; background-color: #fff0f0 } /* Literal.String.Heredoc */ .highlight .si { color: #3333bb; background-color: #fff0f0 } /* Literal.String.Interpol */ .highlight .sx { color: #22bb22; background-color: #f0fff0 } /* Literal.String.Other */ .highlight .sr { color: #008800; background-color: #fff0ff } /* Literal.String.Regex */ .highlight .s1 { color: #dd2200; background-color: #fff0f0 } /* Literal.String.Single */ .highlight .ss { color: #aa6600; background-color: #fff0f0 } /* Literal.String.Symbol */ .highlight .bp { color: #003388 } /* Name.Builtin.Pseudo */ .highlight .fm { color: #0066bb; font-weight: bold } /* Name.Function.Magic */ .highlight .vc { color: #336699 } /* Name.Variable.Class */ .highlight .vg { color: #dd7700 } /* Name.Variable.Global */ .highlight .vi { color: #3333bb } /* Name.Variable.Instance */ .highlight .vm { color: #336699 } /* Name.Variable.Magic */ .highlight .il { color: #0000DD; font-weight: bold } /* Literal.Number.Integer.Long */
!(function (t) {
  t.languages.latte = {
    comment: /^\{\*[\s\S]*/,
    'latte-tag': {
      pattern: /(^\{(?:\/(?=[a-z]))?)(?:[=_]|[a-z]\w*\b(?!\())/i,
      lookbehind: !0,
      alias: 'important',
    },
    delimiter: { pattern: /^\{\/?|\}$/, alias: 'punctuation' },
    php: {
      pattern: /\S(?:[\s\S]*\S)?/,
      alias: 'language-php',
      inside: t.languages.php,
    },
  };
  var e = t.languages.extend('markup', {});
  t.languages.insertBefore(
    'inside',
    'attr-value',
    {
      'n-attr': {
        pattern: /n:[\w-]+(?:\s*=\s*(?:"[^"]*"|'[^']*'|[^\s'">=]+))?/,
        inside: {
          'attr-name': { pattern: /^[^\s=]+/, alias: 'important' },
          'attr-value': {
            pattern: /=[\s\S]+/,
            inside: {
              punctuation: [
                /^=/,
                { pattern: /^(\s*)["']|["']$/, lookbehind: !0 },
              ],
              php: { pattern: /\S(?:[\s\S]*\S)?/, inside: t.languages.php },
            },
          },
        },
      },
    },
    e.tag
  ),
    t.hooks.add('before-tokenize', function (a) {
      if ('latte' === a.language) {
        t.languages['markup-templating'].buildPlaceholders(
          a,
          'latte',
          /\{\*[\s\S]*?\*\}|\{[^'"\s{}*](?:[^"'/{}]|\/(?![*/])|("|')(?:\\[\s\S]|(?!\1)[^\\])*\1|\/\*(?:[^*]|\*(?!\/))*\*\/)*\}/g
        ),
          (a.grammar = e);
      }
    }),
    t.hooks.add('after-tokenize', function (a) {
      t.languages['markup-templating'].tokenizePlaceholders(a, 'latte');
    });
})(Prism);