Monaco-Wiki

Monaco-Wiki registers the Wikitext language in the Monaco Editor. It is a web version of the Visual Studio Code extensions developed by Rowe Wilson Frederisk Holme and Bhsd. The TextMate grammar is substantially revised to be site-specific and more accurate.

Installation

npm install monaco-wiki

Usage

You may load the Monaco Editor and prepare the bundle on your own:

import * as monaco from 'https://cdn.jsdelivr.net/npm/monaco-editor/+esm';
import light from 'shiki/themes/github-light.mjs';
import registerWiki, {
	registerJavaScript,
	registerCSS,
	registerLua,
	registerVue,
} from 'monaco-wiki';

await registerWiki(
	monaco,

	// Set to `true` if used in a MediaWiki site,
	// or a string to specify a preset configuration (https://github.com/bhsd-harry/wikiparser-node/tree/main/config)
	false,

	// (optional) i18n language codes with a preferred order,
	// e.g. `['zh-hans', 'zh-hant', 'en']
	['en'],

	// (optional) custom download URL for the `wikiparse` object`
	'https://cdn.jsdelivr.net/npm/wikiparser-node',

	// (optional) Shiki themes
	[light],

	// (optional) WikiLint options
	{
		// `0` ignores all, `1` ignores warnings, `2` reports all (default)
		defaultSeverity: 1,
		// Rules are listed at https://github.com/bhsd-harry/wikiparser-node/wiki/Rules
		'no-arg': 0,
	},
);

registerJavaScript(
	monaco,

	// (optional) custom download URL for the `eslint` object`
	'https://cdn.jsdelivr.net/npm/@bhsd/eslint-browserify',

	// (optional) ESLint options
	// See https://eslint.org/docs/v8.x/use/configure/
	{
		parserOptions: {
			sourceType: 'module',
		},
	},
);

registerCSS(
	monaco,

	// (optional) custom download URL for the `stylelint` object`
	'https://cdn.jsdelivr.net/npm/@bhsd/stylelint-browserify',

	// (optional) Stylelint options
	// See https://stylelint.io/user-guide/configure/
	{
		rules: {
			'length-zero-no-unit': true,
		},
	},
);

registerLua(
	monaco,

	// (optional) custom download URL for the `luacheck` object`
	'https://cdn.jsdelivr.net/npm/luacheck-browserify',

	// (optional) Luacheck options
	// See https://luacheck.readthedocs.io/en/stable/config.html#config-options
	{
		std: 'mediawiki',
	},
);

await registerVue(
	monaco,

	// (optional) Shiki themes
	[light],
);

or simply load the pre-bundled version from a CDN:

// Optionally specify the jsDelivr CDN, defaulting to https://fastly.jsdelivr.net
window.monaco = {CDN: 'https://cdn.jsdelivr.net'};
// Automatically loads the Monaco Editor's core and relevant workers
await import('https://cdn.jsdelivr.net/npm/monaco-wiki/dist/all.min.js');
await monaco; // The global `monaco` is a promise that resolves to the Monaco editor

Language Aliases

• wikitext
• wiki
• mediawiki

Bundled Themes

|Name|ID| |:-:|:-:| |Light+|light-plus| |Monokai|monokai|

Known Issues

Syntax Highlighting

Redirect

1. Redirect is only allowed at the beginning of a page (Example).

Extension

1. Legacy syntax of <tvar> tags is not supported (Example).
2. <gallery> tags are not supported (Example).
3. Nested language in <syntaxhighlight> (Example).
4. <nowiki> tags inside <pre> are not supported (Example).
5. Multiline extension tags (Example).
6. Extension tags containing unclosed comments (Example).
7. Extension tags cannot be nested in same tags (Example).

Transclusion

1. Bracket pair colorization is problematic (Example), especially for 4 consecutive braces (left or right braces).
2. Substitution is not correctly highlighted (Example).
3. Non-existing parser functions starting with # are highlighted as parser functions (Example).
4. Multiline template names should be invalid (Example).
5. Template names containing comments are not highlighted (Example).
6. Template parameter names containing newlines or comments are not highlighted (Example).
7. HTML tags break the template syntax (Example).
8. External links break the template syntax (Example).
9. Parameter names of #invoke are not highlighted (Example).
10. Conflict between transclusion and language conversion syntax (Example).

Heading

1. Multiline trailing comments break section headings (Example).
2. Section headings containing multiline extension tags are not highlighted (Example).

HTML tag

1. Complex HTML tag attributes are not supported (comments, <noinclude>/<includeonly>, templates or HTML tags).
2. HTML tag attributes cannot contain > (Example).
3. Disallowed HTML attributes should not be highlighted (Example).

Table

1. Interaction between table cells and <nowiki> is highlighted incorrectly (Example).
2. Interaction between table cells and templates is highlighted incorrectly (Example).
3. Interaction between table cells and HTML tags is highlighted incorrectly (Example).
4. Interaction between table cells and comments is highlighted incorrectly (Example).
5. Complex table attributes are not supported (Example).
6. Comments at the SOL break table syntax (Example).
7. ||/!! after templates are not highlighted (Example).

Link

1. Multiline link targets should be invalid (Example).
2. A bracket pair inside link text is highlighted incorrectly (Example).
3. Link targets with templates may be highlighted incorrectly (Example).
4. Lonely [[ breaks highlighting (Example).

Apostrophe

1. Mixing bold and italic apostrophes (Example).

External link

1. External links are not XML tags (Example).
2. External links cannot be nested in links (Example).
3. Magic links cannot be nested in links (Example).

Block element

1. Preformatted text with a leading space is not supported.
2. One-line definition lists are not supported (Example).
3. Comments at the SOL break the highlighting (Example).

Language conversion

1. BCP 47 language codes are not supported in language conversion (Example).