This extension uses JTab to render chords and tablatures into your RoamResearch graph.
Go to your roam/js page, create a new block with the js component: {{[[roam/js]])}} and then add a Javascript code block as child of the component with this content:
var roam_jtab_import = document.getElementById("roam-jtab-import");
if (!roam_jtab_import) {
var roam_jtab_import = document.createElement("script");
roam_jtab_import.src = "https://combinatronics.com/squiter/roam-jtab/main/roam-jtab.js";
roam_jtab_import.id = "roam-jtab-import";
roam_jtab_import.async = false;
roam_jtab_import.type = "text/javascript";
document.getElementsByTagName("head")[0].appendChild(roam_jtab_import);
}Then refresh your graph
To use this extension you should add your tablatures or chords using the Jtab Notation after one of those three tags: #jtab, #jtab-chords-only or #jtab-tabs-only. Since the music notation uses #, I recommend that you put your tabs and chords inside a code block to avoid creating new pages in your graph. E.g. "#jtab C#m"
If you're using SmartBlocks I recommend use this template:
- #SmartBlock jtab
- #jtab `<%CURSOR%>`
To make the images show, you need to click on a block and then leaving the edit. I couldn't figure out yet how to make this extension runs in every page load.