Package Exports

monogon
monogon/dist/monogon-el.js

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (monogon) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

Monogon

Super lightweight syntax highlighting for modern browsers.

alt text

Usage

Import it

import 'monogon';

Use in your HTML

<monogon-el lang="json" content='{ "names": ["ian", "camilo"], size: "1kb", status: null  }'>Click me</monogon-el>

<script>
  document.querySelector('monogon-el').addEventListener('input', (event) => {
    console.log(event.target.value);
  });
</script>

Supported languages

Language	property	syntax	formating
JSON	json	✅	✅
CSS	css	❓	❌
plaintext	plaintext	-	-

Frameworks

Vue

// in <template>
<monogon-el :content="content" @input="handleInput">Click me</monogon-el>

// in <script>
const content = ref('{ "json": ["this", "is", "json"], "how": 42  }')
const handleInput = (e) => {
    content.value = e.target.value
}

Vue assumes all non-native HTML elements are Vue components. To resolve this specify in your build config:

plugins: [
  vue({
    template: {
      compilerOptions: {
        // treat all tags with a dash as custom elements
        isCustomElement: (tag) => tag.includes('-'),
      },
    },
  }),
];

Preact

<monogon-el content={jsonText} onInput={(e) => console.log(e.target.value)}></monogon-el>

With SSR

Since SSR is not yet supported, you need to load it in the browser during page load.