summaryrefslogtreecommitdiffstats
path: root/public/prism/prism-crystal.min.js
blob: 32ee0b9b698391b2944f4338bf7c24ce3437e81b (plain)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
!(function (e) {
  (e.languages.crystal = e.languages.extend('ruby', {
    keyword: [
      /\b(?:__DIR__|__END_LINE__|__FILE__|__LINE__|abstract|alias|annotation|as|asm|begin|break|case|class|def|do|else|elsif|end|ensure|enum|extend|for|fun|if|ifdef|include|instance_sizeof|lib|macro|module|next|of|out|pointerof|private|protected|ptr|require|rescue|return|select|self|sizeof|struct|super|then|type|typeof|undef|uninitialized|union|unless|until|when|while|with|yield)\b/,
      { pattern: /(\.\s*)(?:is_a|responds_to)\?/, lookbehind: !0 },
    ],
    number:
      /\b(?:0b[01_]*[01]|0o[0-7_]*[0-7]|0x[\da-fA-F_]*[\da-fA-F]|(?:\d(?:[\d_]*\d)?)(?:\.[\d_]*\d)?(?:[eE][+-]?[\d_]*\d)?)(?:_(?:[uif](?:8|16|32|64))?)?\b/,
    operator: [/->/, e.languages.ruby.operator],
    punctuation: /[(){}[\].,;\\]/,
  })),
    e.languages.insertBefore('crystal', 'string-literal', {
      attribute: {
        pattern: /@\[.*?\]/,
        inside: {
          delimiter: { pattern: /^@\[|\]$/, alias: 'punctuation' },
          attribute: {
            pattern: /^(\s*)\w+/,
            lookbehind: !0,
            alias: 'class-name',
          },
          args: { pattern: /\S(?:[\s\S]*\S)?/, inside: e.languages.crystal },
        },
      },
      expansion: {
        pattern: /\{(?:\{.*?\}|%.*?%)\}/,
        inside: {
          content: {
            pattern: /^(\{.)[\s\S]+(?=.\}$)/,
            lookbehind: !0,
            inside: e.languages.crystal,
          },
          delimiter: { pattern: /^\{[\{%]|[\}%]\}$/, alias: 'operator' },
        },
      },
      char: {
        pattern:
          /'(?:[^\\\r\n]{1,2}|\\(?:.|u(?:[A-Fa-f0-9]{1,4}|\{[A-Fa-f0-9]{1,6}\})))'/,
        greedy: !0,
      },
    });
})(Prism);
{ 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 */
@use "../../abstracts/functions" as fun;
@use "../../abstracts/mixins" as mix;

@mixin styles {
  .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;
    border: fun.convert-px(1) solid var(--color-border-light);
    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);
      }
    }

    span.inline-color-wrapper {
      background: url(fun.encode-svg(
        '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 2 2"><path fill="gray" d="M0 0h2v2H0z"/><path fill="white" d="M0 0h1v1H0zM1 1h1v1H1z"/></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%;
    }
  }
}