Creating a customized theme with Aurelia syntax support

Syntax coloring can be provided by defining styles for the scopes. For information about how to create custom themes, see the Visual Studio Code instructions on creating custom themes.

Extended by Aurelia extension

Below is a list of the different scopes we created and tokenized for you.

The scopes inherit/ are a hierarchy, so html.au will style each scope ending on html.au in this style. For example, the default themes we provide just contain the following to colorize Aurelia attributes and elements:

{
    "scope": ["element.html.au", "attribute.html.au"],
    "settings": {
        "foreground": "#ba68c8"
    }
}

Or you can provide a style for a particular scope, for example:

{
    "scope": ["ref.attribute.html.au"],
    "settings": {
        "foreground": "yellow"
    }
}

Will color all the ref attributes yellow.

#Scopes The Aurelia extension provides the following scopes:

String interpolation

scope	text
punctuation.definition.string.interpolation.start	${foo}
punctuation.definition.string.interpolation.end	${foo}

Element scopes

scope	text
compose.element.html.au	<compose></compose>
router-view.element.html.au	<router-view></router-view>

Attribute scopes

scope	sample text
databinding.attribute.html.au	.bind="" .one-way="" .two-way="" .one-time=""
invoke.attribute.html.au	.delegate="" .trigger="" .call=""
ref.attribute.html.au	.ref=""
repeat.attribute.html.au	repeat.for=""
for.attribute.html.au	repeat.for=""
view-model.attribute.html.au	view-model.bind=""
matcher.attribute.html.au	matcher.bind=""
model.attribute.html.au	model.bind=""
view.attribute.html.au	view.bind=""
controller.attribute.html.au	controller.bind=""
bindable.attribute.html.au	bindable=""
containerless.attribute.html.au	containerless
compile-spy.attribute.html.au	compile-spy
view-spy.attribute.html.au	view-spy
if.attribute.html.au	if.bind="" naive-if.bind=""
route-href.attribute.html.au	route-href.bind=""
show.attribute.html.au	show.bind=""
ref.attribute.html.au	ref=""
replace-part.attribute.html.au	replace-part=""
replaceable.attribute.html.au	replaceable