diff --git a/README.md b/README.md
index b98e958..964ead5 100644
--- a/README.md
+++ b/README.md
@@ -17,20 +17,22 @@ To see what VexTab can do, take a look at the [list of features](http://my.vexfl
Simply include `releases/vextab-div.js` into your HTML document via a script tag. The contents of all `div` elements with the class `vex-tabdiv` are parsed as VexTab and automatically rendered in-place as music notation.
-
options space=20
- tabstave
- notation=true
- key=A time=4/4
+```html
+
options space=20
+ tabstave
+ notation=true
+ key=A time=4/4
- notes :q =|: (5/2.5/3.7/4) :8 7-5h6/3 ^3^ 5h6-7/5 ^3^ :q 7V/4 |
- notes :8 t12p7/4 s5s3/4 :8 3s:16:5-7/5 :h p5/4
- text :w, |#segno, ,|, :hd, , #tr
+ notes :q =|: (5/2.5/3.7/4) :8 7-5h6/3 ^3^ 5h6-7/5 ^3^ :q 7V/4 |
+ notes :8 t12p7/4 s5s3/4 :8 3s:16:5-7/5 :h p5/4
+ text :w, |#segno, ,|, :hd, , #tr
- options space=25
-
+ options space=25
+
+```
VexTab defaults to HTML5 canvas; for SVG include RaphaelJS in a script tag _before_ `vextab-div.js`. See the `.html` files in `doc/` for examples of `vextab-div` in use.
@@ -53,33 +55,37 @@ Note that the provided `vextab-div.js` bundle is unminified, and includes all ne
If you want to do more interesting things with VexTab, you can use the API directly.
- $ npm install vextab
+```
+$ npm install vextab
+```
Basic usage:
- // Load VexTab module.
- vextab = require("vextab");
+```js
+// Load VexTab module.
+vextab = require("vextab");
- VexTab = vextab.VexTab;
- Artist = vextab.Artist;
- Renderer = vextab.Vex.Flow.Renderer;
+VexTab = vextab.VexTab;
+Artist = vextab.Artist;
+Renderer = vextab.Vex.Flow.Renderer;
- // Create VexFlow Renderer from canvas element with id #boo.
- renderer = new Renderer($('#boo')[0], Renderer.Backends.CANVAS);
+// Create VexFlow Renderer from canvas element with id #boo.
+renderer = new Renderer($('#boo')[0], Renderer.Backends.CANVAS);
- // Initialize VexTab artist and parser.
- artist = new Artist(10, 10, 600, {scale: 0.8});
- vextab = new VexTab(artist);
+// Initialize VexTab artist and parser.
+artist = new Artist(10, 10, 600, {scale: 0.8});
+vextab = new VexTab(artist);
- try {
- // Parse VexTab music notation passed in as a string.
- vextab.parse("tabstave notation=true\n notes :q 4/4\n")
+try {
+ // Parse VexTab music notation passed in as a string.
+ vextab.parse("tabstave notation=true\n notes :q 4/4\n")
- // Render notation onto canvas.
- artist.render(renderer);
- } catch (e) {
- console.log(e);
- }
+ // Render notation onto canvas.
+ artist.render(renderer);
+} catch (e) {
+ console.log(e);
+}
+```
See `tests/playground.js` for a working example of the VexTab API in use.
@@ -89,15 +95,19 @@ You can also also use the API in standalone mode, i.e., without a loader, by inc
Clone this repository. Then run the following commands to setup a basic build and run tests:
- $ npm install
- $ npm link
- $ npm link vextab
- $ npm start
+```
+$ npm install
+$ npm link
+$ npm link vextab
+$ npm start
+```
If you have the `grunt-cli` NPM package installed, you can manually run the various build steps:
- $ npm install -g grunt-cli
- $ grunt (lint|build|test|stage|publish)
+```
+$ npm install -g grunt-cli
+$ grunt (lint|build|test|stage|publish)
+```
Before sending in a pull request, make sure that the tests pass a visual inspection. Open `tests/runtests.html` in your browser and verify that the notation examples at the bottom of the page render correctly. Also open `tests/playground.html` and verify that your new feature/bug fix, etc. works correctly.