diff --git a/website/monarch.html b/website/monarch.html index 32f5b2bb..62fce546 100644 --- a/website/monarch.html +++ b/website/monarch.html @@ -91,6 +91,7 @@ Theme: @@ -218,7 +219,7 @@ meta .[content]
bracket: kind
(Advanced) The kind can be either '@open' or '@close'. This signifies that a token is either an open or close brace. This attribute is set automatically if the token class is @brackets. The editor uses the bracket information to show matching braces (where an open bracket matches with a close bracket if their token classes are the same). Moreover, when a user opens a new line the editor will do auto indentation on open braces. Normally, this attribute does not need to be set if you are using the brackets attribute and it is only used for complex brace matching. This is discussed further in the next section on advanced brace matching.
-
nextEmbedded: langId or '@pop'
(Advanced) Signifies to the editor that this token is followed by code in another language specified by the langId, i.e. for example javascript. Internally, our syntax highlighter keeps tokenizing the source until it finds an an ending sequence. At that point, you can use nextEmbedded with a '@pop' value to pop out of the embedded mode again. Usually, we need to use a next attribute too to switch to a state where we can tokenize the foreign code. As an example, here is how we could support CSS fragments in our language: +
nextEmbedded: langId or '@pop'
(Advanced) Signifies to the editor that this token is followed by code in another language specified by the langId, i.e. for example javascript. Internally, our syntax highlighter keeps tokenizing the source until it finds an an ending sequence. At that point, you can use nextEmbedded with a '@pop' value to pop out of the embedded mode again. nextEmbedded usually needs a next attribute to switch to a state where we can tokenize the foreign code. As an example, here is how we could support CSS fragments in our language:
root: [
   [/<style\s*>/,   { token: 'keyword', bracket: '@open'
                    , next: '@css_block', nextEmbedded: 'text/css' }],
@@ -393,6 +394,12 @@ tokenizer: {
     
 
     

This will show a display over the currently selected token for its language, token type, basic font style and colors, and selector you can target in your editor themes.

+ +

 

+

Additional Examples

+ +

Additional examples can be found in the src folder of the monaco-languages repo.

+