ctrl+shift+p filters: :st2 :st3 :win :osx :linux
Browse

Riot Tag

by riot ST2/ST3

Riot tags syntax rules

Details

Installs

  • Total 5K
  • Win 3K
  • OS X 2K
  • Linux 596
Oct 24 Oct 23 Oct 22 Oct 21 Oct 20 Oct 19 Oct 18 Oct 17 Oct 16 Oct 15 Oct 14 Oct 13 Oct 12 Oct 11 Oct 10 Oct 9 Oct 8 Oct 7 Oct 6 Oct 5 Oct 4 Oct 3 Oct 2 Oct 1 Sep 30 Sep 29 Sep 28 Sep 27 Sep 26 Sep 25 Sep 24 Sep 23 Sep 22 Sep 21 Sep 20 Sep 19 Sep 18 Sep 17 Sep 16 Sep 15 Sep 14 Sep 13 Sep 12 Sep 11 Sep 10 Sep 9
Windows 1 3 1 2 0 3 3 1 1 0 0 4 0 0 4 4 0 1 1 1 2 3 3 2 2 3 3 2 3 5 2 1 2 2 0 2 1 2 3 1 4 2 2 4 2 1
OS X 0 0 0 1 0 3 1 0 0 1 0 2 1 0 0 0 3 1 1 2 5 3 3 2 0 0 2 1 2 3 2 0 1 5 1 0 0 0 0 3 3 0 2 2 0 0
Linux 0 1 0 1 1 0 0 0 1 0 0 0 1 0 2 1 0 1 0 0 0 0 0 0 2 0 1 0 1 1 0 0 0 1 0 0 0 0 0 1 0 0 2 0 2 0

Readme

Source
raw.​githubusercontent.​com

Riot Syntax Highlighters

Riot.js tag syntax highlighting for

screencast

This extension supports HTML, Jade, Stylus and Coffeescript within script tags.

With this plugin you can use

<yourtag>
  <script type="coffee">
    # your coffee script here
  </script>
  <script>
    // your javascript here
  </script>
</yourtag>

This will then have correct syntax highlighting.

Jade / Pug Support

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.

yourtag
  p hello world

  script(type="coffee").
    # your coffee script here

  style.
    /* your css here */

  style(type="stylus")
    // your stylus here

Stylus Support

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).

Installation

Visual Studio Code

cmd+shift+p
type: ext install riot-tag

Atom

cmd+shift+p
type: install package 
search for riot-tag, press enter, click install

Sublime Text

cmd+shift+p
type: install package 
search 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.

Using with Browserify

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.

{
  "scripts":{
    "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"
  },
  "browserify": {
    "debug": true,
    "transform": [
      [
        "riotify",{
          "expr": false,
          "type": "coffee",
          "template": "jade"
        }
      ]
    ]
  },
  "devDependencies": {
    "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.

Giving Feedback

If you have any problems, feedback or just fancy starring this project see https://github.com/riot/syntax-highlight

History

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