oleg
/
monaco-editor
mirror of https://github.com/microsoft/monaco-editor.git


			
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210
							<!DOCTYPE html>
<!-- THIS IS A GENERATED FILE VIA `npm run simpleserver` -->
<html>
<head>
	<base href="..">
	<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
</head>
<body>
<style>
/*----------------------------------------SAMPLE CSS START*/


/*----------------------------------------SAMPLE CSS END*/
</style>
<a class="loading-opts" href="playground.generated/index.html">[&lt;&lt; BACK]</a> <br/>
THIS IS A GENERATED FILE VIA `npm run simpleserver`

<div id="bar" style="margin-bottom: 6px;"></div>

<div style="clear:both"></div>
<div id="outer-container" style="width:800px;height:450px;border: 1px solid grey">
<!-- ----------------------------------------SAMPLE HTML START-->

<div id="container" style="height: 100%"></div>


<!-- ----------------------------------------SAMPLE HTML END-->
</div>
<div style="clear:both"></div>

<script src="../../metadata.js"></script>
<script src="dev-setup.js"></script>
<script>
loadEditor(function() {
/*----------------------------------------SAMPLE JS START*/

/** @type {monaco.languages.SemanticTokensLegend} */
const legend = {
	tokenTypes: [
		'comment',
		'string',
		'keyword',
		'number',
		'regexp',
		'operator',
		'namespace',
		'type',
		'struct',
		'class',
		'interface',
		'enum',
		'typeParameter',
		'function',
		'member',
		'macro',
		'variable',
		'parameter',
		'property',
		'label'
	],
	tokenModifiers: [
		'declaration',
		'documentation',
		'readonly',
		'static',
		'abstract',
		'deprecated',
		'modification',
		'async'
	]
};

/** @type {(type: string)=>number} */
function getType(type) {
	return legend.tokenTypes.indexOf(type);
}

/** @type {(modifier: string[]|string|null)=>number} */
function getModifier(modifiers) {
	if (typeof modifiers === 'string') {
		modifiers = [modifiers];
	}
	if (Array.isArray(modifiers)) {
		let nModifiers = 0;
		for (let modifier of modifiers) {
			const nModifier = legend.tokenModifiers.indexOf(modifier);
			if (nModifier > -1) {
				nModifiers |= (1 << nModifier) >>> 0;
			}
		}
		return nModifiers;
	} else {
		return 0;
	}
}

const tokenPattern = new RegExp('([a-zA-Z]+)((?:\\.[a-zA-Z]+)*)', 'g');

monaco.languages.registerDocumentSemanticTokensProvider('plaintext', {
	getLegend: function () {
		return legend;
	},
	provideDocumentSemanticTokens: function (model, lastResultId, token) {
		const lines = model.getLinesContent();

		/** @type {number[]} */
		const data = [];

		let prevLine = 0;
		let prevChar = 0;

		for (let i = 0; i < lines.length; i++) {
			const line = lines[i];

			for (let match = null; (match = tokenPattern.exec(line)); ) {
				// translate token and modifiers to number representations
				let type = getType(match[1]);
				if (type === -1) {
					continue;
				}
				let modifier = match[2].length ? getModifier(match[2].split('.').slice(1)) : 0;

				data.push(
					// translate line to deltaLine
					i - prevLine,
					// for the same line, translate start to deltaStart
					prevLine === i ? match.index - prevChar : match.index,
					match[0].length,
					type,
					modifier
				);

				prevLine = i;
				prevChar = match.index;
			}
		}
		return {
			data: new Uint32Array(data),
			resultId: null
		};
	},
	releaseDocumentSemanticTokens: function (resultId) {}
});

// add some missing tokens
monaco.editor.defineTheme('myCustomTheme', {
	base: 'vs',
	inherit: true,
	colors: {},
	rules: [
		{ token: 'comment', foreground: 'aaaaaa', fontStyle: 'italic' },
		{ token: 'keyword', foreground: 'ce63eb' },
		{ token: 'operator', foreground: '000000' },
		{ token: 'namespace', foreground: '66afce' },

		{ token: 'type', foreground: '1db010' },
		{ token: 'struct', foreground: '0000ff' },
		{ token: 'class', foreground: '0000ff', fontStyle: 'bold' },
		{ token: 'interface', foreground: '007700', fontStyle: 'bold' },
		{ token: 'enum', foreground: '0077ff', fontStyle: 'bold' },
		{ token: 'typeParameter', foreground: '1db010' },
		{ token: 'function', foreground: '94763a' },

		{ token: 'member', foreground: '94763a' },
		{ token: 'macro', foreground: '615a60' },
		{ token: 'variable', foreground: '3e5bbf' },
		{ token: 'parameter', foreground: '3e5bbf' },
		{ token: 'property', foreground: '3e5bbf' },
		{ token: 'label', foreground: '615a60' },

		{ token: 'type.static', fontStyle: 'bold' },
		{ token: 'class.static', foreground: 'ff0000', fontStyle: 'bold' }
	]
});

const editor = monaco.editor.create(document.getElementById('container'), {
	value: [
		'Available token types:',
		'    [comment] [string] [keyword] [number] [regexp] [operator] [namespace]',
		'    [type] [struct] [class] [interface] [enum] [typeParameter] [function]',
		'    [member] [macro] [variable] [parameter] [property] [label]',
		'',
		'Available token modifiers:',
		'    [type.declaration] [type.documentation] [type.member] [type.static]',
		'    [type.abstract] [type.deprecated] [type.modification] [type.async]',
		'',
		'Some examples:',
		'    [class.static.token]     [type.static.abstract]',
		'    [class.static.token]     [type.static]',
		'',
		'    [struct]',
		'',
		'    [function.private]',
		'',
		'An error case:',
		'    [notInLegend]'
	].join('\n'),
	language: 'plaintext',
	theme: 'myCustomTheme',
	// semantic tokens provider is disabled by default
	'semanticHighlighting.enabled': true
});


/*----------------------------------------SAMPLE JS END*/
});
</script>
</body>
</html>