JSFiddle - React, Tailwind, and code Playground

by Sineos

HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Klipper Config Syntax Highlighting</title>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/highlight.min.js"></script>
    <script src="./dev_test.js"></script>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/styles/default.min.css">
    <script>
        document.addEventListener('DOMContentLoaded', (event) => {
            hljs.highlightAll();
        });
    </script>
</head>
<body>
    <h1>Klipper Config Example</h1>
    <pre><code class="language-klipper">

[idle_timeout]
gcode:
    {% if printer.pause_resume.is_paused %}
        M104 S0
    {% else %}

[stepper_x] # iii
step_pin: PC2 ; kkk
; bla
step_pin: PC2

[board_pins] ; kkk
aliases:
    EXP1_5=PE12, EXP1_6=PE13,    # hhh
    EXP1_5=PE12, EXP1_6=PE13,    ; jjj


    </code></pre>
</body>
</html>

JavaScript

hljs.registerLanguage("klipper", function (hljs) {
  const COMMENT = {
    scope: "comment",
    variants: [
      { begin: /^\s*[#;].*$/, end: /$/ }, // Standalone comments
      { begin: /(?!\s)[#|;].*/, end: /$/ }, // Inline/trailing comments
    ],
    relevance: 10,
  }

  const KEY_PART = {
    scope: "symbol",
    begin: /^[^=\s]+(?=\s*[:=])/,
    //end: /^(?!\s).+?\s?[=:](?=(?:[^\n]*$))/,
  }

  const VALUE_PART = {
    scope: "addition",
    begin: /[:=]/,
    //end: /\r?\n$/, // Match until the end of the line
    end: /$/, // Match until the end of the line
    excludeBegin: true, // Ensure the separator is not included
    excludeEnd: true,
    contains: [COMMENT],
  }

  const SECTION = {
    scope: "punctuation",
    begin: /^\s*\[/,
    end: /\]/,
    contains: [
      {
        scope: "title",
        match: /[^\]]+/,
      },
    ],
  }

  const INDENTED_BLOCK = {
    scope: "deletion",
    begin: /^\s+/,
    end: /$/,
    contains: [COMMENT],
    relevance: 10,
  }

  return {
    name: "Klipper Config",
    aliases: ["klipper", "cfg"],
    disableAutodetect: true,
    contains: [COMMENT, SECTION, KEY_PART, VALUE_PART, INDENTED_BLOCK],
  }
})