slint/docs/resources/slint-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 slint-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://slint-ui.com/resources/highlightjs/11.0.1/default.min.css">
<script src="https://slint-ui.com/resources/highlightjs/11.0.1/highlight.min.js"></script>
<script>
  function highlight_slint(hljs) {
    const KEYWORDS = {
      keyword:
        "animate callback component export for function global if import in in-out inherits out parent private property public pure root self signal states struct transitions",
      literal: "false true",
      built_in:
        "ArcTo Clip Close Colors CubicTo Flickable FocusScope GridLayout HorizontalLayout Image LineTo Math MoveTo Path PopupWindow QuadraticTo Rectangle Row Text TextInput TouchArea VerticalLayout Window animation-tick debug",
      type: "bool duration easing float int length logical_length relative-font-size resource string",
    };

    return {
      name: 'slint',
      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: /@/
    };
  };

  // Tags used in fenced code blocks
  for (let tag of ["slint", "slint,no-preview", "slint,no-auto-preview", "slint,ignore"]) {
    hljs.registerLanguage(tag, highlight_slint);
  }


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

      // Some of the rustdoc selectors require the pre element to have the rust class
      for (codeBlock of document.querySelectorAll(".language-slint.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[class*=highlight-slint] div.highlight pre")) {
        hljs.highlightElement(block)
      }
    }
  });
</script>