Language
The language declaration, TextMate grammars provide syntax highlighting and improved editor integration.
Installation
npm i @master/css-languageIt allows styling (syntax highlighting) and to make the text editor “smart” about which context the caret is in.
Basic usage
Import the textmate grammars
The grammars array object is compatible with Shiki LanguageRegistration[].
import { grammars } from '@master/css-language'Or import the grammars module:
import grammars from '@master/css-language/grammars'View the grammars source
import core from '../syntaxes/master-css.json'import injectionClass from '../syntaxes/master-css.injection-class.json'import injectionJS from '../syntaxes/master-css.injection-js.json'import injectionReact from '../syntaxes/master-css.injection-react.json'import injectionString from '../syntaxes/master-css.injection-string.json'import injectionVue from '../syntaxes/master-css.injection-vue.json'import type { LanguageRegistration } from 'shiki/types'import declaration from './declaration'export declare type Grammar = { embeddedLanguages?: Record<string, string>} & LanguageRegistrationconst grammars = [ { ...core, aliases: declaration.aliases }, { ...injectionClass, injectTo: [ 'source', 'text' ] }, { ...injectionReact, injectTo: [ 'source.js.jsx', 'source.ts.tsx', 'source.mdx', 'source.jsx', 'source.tsx' ] }, { ...injectionVue, injectTo: [ 'source.vue' ] }, { ...injectionJS, injectTo: [ 'source.js.jsx', 'source.ts.tsx', 'source.mdx', 'source.jsx', 'source.tsx', 'source.js', 'source.ts', 'source.svelte', 'source.vue' ], embeddedLanguages: { 'meta.embedded.block.master-css.class': 'master-css' }, }, { ...injectionString, injectTo: [ 'source.js.jsx', 'source.ts.tsx', 'source.mdx', 'source.jsx', 'source.tsx', 'source.js', 'source.ts', 'source.svelte', 'source.vue' ] }] as Grammar[]export default grammarsImport the language declaration
import { declaration } from '@master/css-language'Or import the declaration module:
import declaration from '@master/css-language/declaration'View the declaration source
const declaration = { id: 'master-css', aliases: [ 'mastercss', 'mcss' ], extensions: [ '.mcss' ]}export default declarationIntegrating
Shiki
Shiki is a beautiful syntax highlighter. It uses TextMate grammars to provide syntax highlighting for a wide range of languages. You can use the Master CSS TextMate grammars with Shiki to provide syntax highlighting for Master CSS.
import { createHighlighterCore } from 'shiki/core'import { createJavaScriptRegexEngine } from 'shiki/engine/javascript'import masterCSSLangDeclaration from '@master/css-language/declaration'export default function createHighlighter() { const langAlias: Record<string, string> = {} masterCSSLangDeclaration.aliases.forEach(alias => { langAlias[alias] = masterCSSLangDeclaration.id }) return createHighlighterCore({ langs: [ import('@shikijs/langs/html'), import('@shikijs/langs/javascript'), ..., import('@master/css-language/grammars') ], themes: [ import('@shikijs/themes/dracula'), ... ], langAlias, engine: createJavaScriptRegexEngine(), })}export const themes = { dark: 'dracula', light: 'min-light'}Highlight a string:
highlighter.codeToHtml('text:center font:32@md', { lang: 'mcss' })text:center font:32@mdHighlight a template:
highlighter.codeToHtml(html, { lang: 'html' })<div class="text:center font:32@md"> <p>Master CSS</p></div>Monaco Editor
The Monaco Editor is the fully featured code editor from VS Code. Integrate Monaco Editor based on the above shiki setup.
import { shikiToMonaco } from '@shikijs/monaco'import * as monaco from 'monaco-editor-core'import highlighter from './highlighter'// ...shikiToMonaco(highlighter, monaco)See the @shikijs/monaco documentation.