daohualiuxiang
/
monaco-editor
mirror of https://github.com/microsoft/monaco-editor.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

Update custom languages sample to latest theme API

pull/8/merge
Alex Dima 2017-01-18 12:07:50 +01:00
parent 80a677c51c
commit 0e78d5c099
3 changed files with 32 additions and 30 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

31
test/playground.generated/extending-language-services-custom-languages.html
View File

@ -10,21 +10,6 @@
<style>
/*----------------------------------------SAMPLE CSS START*/
.monaco-editor .token.custom-info {
color: grey;
}
.monaco-editor .token.custom-error {
color: red;
font-weight: bold;
font-size: 1.2em;
}
.monaco-editor .token.custom-notice {
color: orange;
}
.monaco-editor .token.custom-date {
color: green;
}
/*----------------------------------------SAMPLE CSS END*/
@ -51,8 +36,10 @@ THIS IS A GENERATED FILE VIA gulp generate-test-samples
loadEditor(function() {
/*----------------------------------------SAMPLE JS START*/
// Register a new language
monaco.languages.register({ id: 'mySpecialLanguage' });
// Register a tokens provider for the language
monaco.languages.setMonarchTokensProvider('mySpecialLanguage', {
tokenizer: {
root: [
@ -64,6 +51,19 @@ monaco.languages.setMonarchTokensProvider('mySpecialLanguage', {
}
});
// Define a new theme that constains only rules that match this language
monaco.editor.defineTheme('myCoolTheme', {
base: 'vs',
inherit: false,
rules: [
{ token: 'custom-info', foreground: '808080' },
{ token: 'custom-error', foreground: 'ff0000', fontStyle: 'bold' },
{ token: 'custom-notice', foreground: 'FFA500' },
{ token: 'custom-date', foreground: '008800' },
]
});
// Register a completion item provider for the new language
monaco.languages.registerCompletionItemProvider('mySpecialLanguage', {
provideCompletionItems: () => {
return [
@ -92,6 +92,7 @@ monaco.languages.registerCompletionItemProvider('mySpecialLanguage', {
});
monaco.editor.create(document.getElementById("container"), {
theme: 'myCoolTheme',
value: getCode(),
language: 'mySpecialLanguage'
});

15
website/playground/new-samples/extending-language-services/custom-languages/sample.css
View File

@ -1,15 +0,0 @@
.monaco-editor .token.custom-info {
color: grey;
}
.monaco-editor .token.custom-error {
color: red;
font-weight: bold;
font-size: 1.2em;
}
.monaco-editor .token.custom-notice {
color: orange;
}
.monaco-editor .token.custom-date {
color: green;
}

16
website/playground/new-samples/extending-language-services/custom-languages/sample.js
View File

@ -1,5 +1,7 @@
// Register a new language
monaco.languages.register({ id: 'mySpecialLanguage' });
// Register a tokens provider for the language
monaco.languages.setMonarchTokensProvider('mySpecialLanguage', {
tokenizer: {
root: [
@ -11,6 +13,19 @@ monaco.languages.setMonarchTokensProvider('mySpecialLanguage', {
}
});
// Define a new theme that constains only rules that match this language
monaco.editor.defineTheme('myCoolTheme', {
base: 'vs',
inherit: false,
rules: [
{ token: 'custom-info', foreground: '808080' },
{ token: 'custom-error', foreground: 'ff0000', fontStyle: 'bold' },
{ token: 'custom-notice', foreground: 'FFA500' },
{ token: 'custom-date', foreground: '008800' },
]
});
// Register a completion item provider for the new language
monaco.languages.registerCompletionItemProvider('mySpecialLanguage', {
provideCompletionItems: () => {
return [
@ -39,6 +54,7 @@ monaco.languages.registerCompletionItemProvider('mySpecialLanguage', {
});
monaco.editor.create(document.getElementById("container"), {
theme: 'myCoolTheme',
value: getCode(),
language: 'mySpecialLanguage'
});