slint/docs/resources/sixtyfps-docs-highlight.html

<!--
    This file is used to add syntax highlighting of the `.slint` snippets in the generated rustdoc, sphinx and mdbook documentation.
    It can be injected via the `--html-in-header sixtyfps-docs-highlight.html` option of rustdoc, is included via _templates/layout.html
    in sphinx and via head.hbs in mdbook.
-->
<link rel="stylesheet" href="https://sixtyfps.io/resources/highlightjs/11.0.1/default.min.css">
<script src="https://sixtyfps.io/resources/highlightjs/11.0.1/highlight.min.js"></script>
<script>
  hljs.registerLanguage("60", function (hljs) {
    const KEYWORDS = {
      keyword:
        'struct export import signal property animate for in if states transitions parent root self',
      literal:
        'true false',
      built_in:
        'Rectangle Image Text TouchArea Flickable Clip TextInput Window GridLayout Row HorizontalLayout VerticalLayout Path MoveTo LineTo ArcTo CubicTo QuadraticTo Close FocusScope Clip PopupWindow',
      type:
        'bool string int float length logical_length duration resource',
    };

    return {
      name: 'sixtyfps',
      aliases: ['60'],
      case_insensitive: false,
      keywords: KEYWORDS,
      contains: [
        hljs.QUOTE_STRING_MODE,
        hljs.C_LINE_COMMENT_MODE,
        hljs.C_BLOCK_COMMENT_MODE,
        hljs.COMMENT('/\\*', '\\*/', {
          contains: ['self']
        }),
        {
          className: 'number',
          begin: '\\b\\d+(\\.\\d+)?(\\w+)?',
          relevance: 0
        },
        {
          className: 'title',
          begin: '\\b[_a-zA-Z][_\\-a-zA-Z0-9]* *:=',
        },
        {
          className: 'symbol',
          begin: '\\b[_a-zA-Z][_\\-a-zA-Z0-9]*(:| *=>)',
        },
        {
          className: 'built_in',
          begin: '\\b[_a-zA-Z][_\\-a-zA-Z0-9]*!',
        },
      ],
      illegal: /@/
    };
  });

  window.addEventListener("DOMContentLoaded", () => {
    const rustDoc = document.querySelector('meta[name="generator"]')?.content == "rustdoc";
    if (rustDoc) {
      // Only highlight .slint blocks, leave the others to rustdoc
      for (dot60Block of document.querySelectorAll(".language-60")) {
        hljs.highlightElement(dot60Block)
      }

      // Some of the rustdoc selectors require the pre element to have the rust class
      for (codeBlock of document.querySelectorAll(".language-60.hljs")) {
        codeBlock.parentElement.classList.add("rust")
      }

      // Change the hljs generated classes to the rustdoc
      // ones, so that the highlighting adjusts to the theme correctly.
      const highlightJSToRustDoc = [
        ["comment", "comment"],
        ["number", "number"],
        ["symbol", "struct"], // width:
        ["keyword", "kw"],
        ["built_in", "primitive"],
        ["string", "string"],
        ["title", "fnname"], // Foo :=
        ["type", "type"]
      ];

      for ([hljs_class, rustdoc_class] of highlightJSToRustDoc) {
        for (titleElement of document.querySelectorAll(`.hljs-${hljs_class}`)) {
          titleElement.classList.remove(`hljs-${hljs_class}`);
          titleElement.classList.add(rustdoc_class);
        }
      }
    } else {
      // For use with the mdbook Tutorial
      hljs.highlightAll();

      // The Sphinx/my_st generated HTML for code blocks does not use <code> tags, so highlight.js'
      // default selector "pre code" does not match. Let's do it by hand:
      for (block of document.querySelectorAll("div.highlight-60 div.highlight pre, div.highlight-60-no-preview div.highlight pre")) {
        hljs.highlightElement(block)
      }
    }
  });
</script>