monogon
v0.1.2
Published
Modern syntax highlighting for the web
Downloads
21
Maintainers
Readme
Monogon
Super lightweight syntax highlighting for modern browsers.
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.