Name: syntax-highlight
Owner: Riot
Description: Riot tags syntax rules
Created: 2016-10-25 17:36:00.0
Updated: 2018-05-13 19:28:33.0
Pushed: 2018-05-13 19:28:32.0
Homepage: null
Size: 496
Language: null
GitHub Committers
User | Most Recent Commit | # Commits |
---|
Other Committers
User | Most Recent Commit | # Commits |
---|
Riot.js tag syntax highlighting for
This extension supports HTML, Jade, Stylus and Coffeescript within script tags.
With this plugin you can use
rtag>
cript type="coffee">
# your coffee script here
script>
cript>
// your javascript here
script>
urtag>
This will then have correct syntax highlighting.
If you like white space sensitive languages, Jade can be a very succinct way to write your tags. The compile process converts all this to html before usage, so there are no overheads to your packages tags. Riot-tag(Jade) supports Jade syntax highlighting, along with embedded coffeescript, stylus and normal JS.
tag
hello world
ript(type="coffee").
# your coffee script here
yle.
/* your css here */
yle(type="stylus")
// your stylus here
You can use stylus within your riot tags, the syntax highlighting requires you to have the stylus syntax highlighting installed too. To compile stylus you'll also need stylus included in your compile process (see browserify tip below).
Visual Studio Code
shift+p
: ext install riot-tag
Atom
shift+p
: install package
ch for riot-tag, press enter, click install
Sublime Text
shift+p
: install package
ch for riot-tag, select in drop down, press enter to click install
The package contains 2 syntax highlighters riot(html) and riot(jade).
If your editor picks the wrong one, you can specify the correct one in your settings file for vscode and atom.
Sublime allows you use the open all with current extension as
feature.
If you like the idea of using Jade, Coffeescript, Stylus etc with your riot tags, adding the below to your package.json file should get you most of the way. Just swap out the package names if you'd prefer not to use any of the compile steps. Non of this is neccesary for riot, but it took me a while to work this out when I started our with riot, once in place it can make a nice workflow.
cripts":{
"watch": "./node_modules/.bin/watchify src/app.coffee -v -o build/site.js",
"build": "./node_modules/.bin/browserify src/app.coffee -d -p [minifyify --uglify [--mangle 0] --map build/app.map.json --output build/app.map.json] -o build/app.js"
rowserify": {
"debug": true,
"transform": [
[
"riotify",{
"expr": false,
"type": "coffee",
"template": "jade"
}
]
]
evDependencies": {
"riot": "^2.3.15",
"riotify": "^0.1.2",
"stylus": "^0.52.4",
"browserify": "^11.2.0",
"jade": "^1.11.0",
"watchify": "^3.4.0",
"minifyify": "^7.1.0"
Then use npm run watch
during development and npm run build
prior to deployment for minified code.
If you have any problems, feedback or just fancy starring this project see https://github.com/riot/syntax-highlight
|Version | Description
|—- |—-
| 1.1.0 | Merged support for atom,sublime and vscode together. Move to riot organisation.
| 0.1.6 | Allows underscores in attribute names
| 0.1.5 | Can now use style(type="stylus")
| 0.1.4 | Fixed sourcename bug
| 0.1.1 | Can now use script(type="coffee")
or <script type="coffee">
| 0.0.8 | Fixed Stylus Bug
| 0.0.7 | Added stylus support for Jade
| 0.0.6 | Allows multiple script tags in jade