Roam-Enhancement

Table of Contents

Introduction

This repository contains a set of JavaScript plugin/extensions (and their related CSS) for Roam Research. I call them enhancements because they improve my daily interaction with Roam. I will gradually add more extensions that I develop for my needs here and update the old ones.

Here is the general installation guideline for all of the JavaScript and CSS codes.

JavaScript Installation

To install, do the same thing you do for any roam/js script.

  1. Create page in Roam (if not already present) called [[roam/js]]

  2. Create a block in the [[roam/js]] page and enter

  3. Create a new block under the block and enter: ```

  4. This ``` create a code block for which you can select a language.

  5. Make sure the code language is set as JavaScript

  6. Paste the JavaScript code into the code block. Usually it looks something like this:

    window.parameters = {
	//Parameters that you can customize 
};
var s = document.createElement("script");
s.type = "text/javascript";
s.src = "https://c3founder.github.io/Roam-Enhancement/enhancedX.js";
document.getElementsByTagName("head")[0].appendChild(s);

  7. A red warning box shows up asking you to review the risks of using roam/js.

  8. Once you have reviewed the warning and understand/accept the risk, click Yes.

  9. Refresh Roam and the script should now be installed!

CSS Installation

To install the CSS put this line in a CSS code block on you [[roam/css]] page. Make sure the code language is set to CSS

@import url('https://c3founder.github.io/Roam-Enhancement/enhancedX.css');

Demo Videos

I usually make YouTube demo video(s) for each extension to explain functionalities and known issues. The main purpose of videos is to prevent confusion and ultimately reduce the number of questions I receive. So please watch them before sending in your questions!

Reporting Issues and Feature Request

You can report bugs and suggest new features through GitHub:

https://github.com/c3founder/Roam-Enhancement/issues

Each extension has its own label that you can use when reporting issues.

I’ll post community wetted solutions to issues here over time.

Enhancements

Math and Multi Language OCR

This extension OCRs images that you have in roam. It supports up to two languages plus math and handwritten text. Images do not need to be uploaded into your roam graph (i.e., no CORS issue). It works on extracted area highlights of the PDF Highlighter.

JavaScript

window.ocrParams = {
    lang1: "eng", //Shift + Click
    lang2: "ara", //Alt + Click
    //Mathpix parameters
    appId: "YOUR_APP_ID",
    appKey: "YOUR_APP_KEY",    
    //Cleanup Shortcut
    cleanKey: 'alt+a c',
	//Edit options
    saveRef2Img: false
};

var s = document.createElement("script");
s.type = "text/javascript";
s.src = "https://c3founder.github.io/Roam-Enhancement/enhancedOCR.js";
document.getElementsByTagName("head")[0].appendChild(s);

Functionalities

Time and Habit Tracking

This is an ongoing effort to build a time+habit+goal tracker in roam. Timer and counter are done, stay tuned for statistics and habit tracker.

JavaScript

var s = document.createElement("script");
s.type = "text/javascript";
s.src = "https://c3founder.github.io/Roam-Enhancement/enhancedTimer.js";
document.getElementsByTagName("head")[0].appendChild(s);

CSS

@import url('https://c3founder.github.io/Roam-Enhancement/enhancedTimer.css');

Functionalities

Timer

makes a stopwatch to track time spend on each block and its children. You can have multiple timers running but on each branch only one timer can be active. In other words, when you start a timer it will stop any other running timer on the same branch to prevent double counting.

Counter

makes is a counter that goes up/down by click/shift-click. You can also manually enter the count as .

Mixed Text Direction

This extension detects right-to-left and left-to-right characters at the beginning of each block and changes the block direction. You can infinitely nest rtl and ltr blocks with no issue. You can also have different font for each of rtl and ltr languages.

JavaScript

var s = document.createElement("script");
s.type = "text/javascript";
s.src = "https://c3founder.github.io/Roam-Enhancement/enhancedLanguage.js";
document.getElementsByTagName("head")[0].appendChild(s);

CSS

@import url('https://c3founder.github.io/Roam-Enhancement/enhancedLanguage.css');
/* More fonts here: https://fonts.google.com/?subset=arabic 
For example for 'Markazi Text', import the following: */
@import url('https://fonts.googleapis.com/css?family=Markazi+Text'); 
@import url(//fonts.googleapis.com/earlyaccess/notonaskharabic.css);
@import url(//fonts.googleapis.com/earlyaccess/notonaskharabicui.css);

:root {  
  --rm-block-sep-min-width: 0px;
  /*****RTL Variables*****/ 
  --rtl-margin-right: 31px;
  --rtl-margin-left: 31px; 
  --rtl-bullet-margin-top: 5px;
  --rtl-control-margin-top: 4px;
  --rtl-generic-font: sans-serif;
  --rtl-font: 'Noto Naskh Arabic'; /*'Markazi Text'*/ /*Make sure you select the generic font first*/
  --rtl-font-size: 1em;
  --rtl-textarea-background-color: rgba(253,253,168,0.53);
  --rtl-textarea-font-size: 1em;
  --rtl-textarea-line-height: 1.75em;
  /*****LTR Variables*****/ 
  --ltr-margin-right: 31px; 
  --ltr-margin-left: 31px; 
  --ltr-bullet-margin-top: unset;
  --ltr-control-margin-top: unset;
  --ltr-generic-font: unset; /*san-serif;*/
  --ltr-font: unset; /*'Lato';*/ /*Make sure you select the generic font first*/
  --ltr-font-size: unset; /*1em;*/
  --ltr-textarea-background-color: rgba(253,253,168,0.53); /*unset;*/
  --ltr-textarea-font-size: unset; /*1em;*/
  --ltr-textarea-line-height: unset; /*1.5em*/
}

Functionalities

New tutorial:

Older tutorial:

PDF Highlighter

Thanks to the following roamcult members who supported the development of this extension (no specific order):

JavaScript

window.pdfParams = {
  //Highlight 
  ///Placement
  outputHighlighAt: 'cousin', //cousin, child
  highlightHeading: '**Highlights**', //for cousin mode only 
  appendHighlight: true, //append: true, prepend: false
  ///Rest of Highlight Options
  breadCrumbAttribute: 'Title', //Title, Author, Citekey, etc. 
  addColoredHighlight: true,//bring the color of highlights into your graph
  //Rerference to Highlight 
  ///Block References Related
  copyBlockRef: true,//false: copy captured text
  sortBtnText: 'sort them all!',//contenthighlighter_prefix
highlighter_suffix
jekyllJekyll::Drops::JekyllDroplayout{"layout"=>"default"}page{"permalink"=>"//", "layout"=>"home", "title"=>"Table of Contents", "content"=>"# Table of Contents \n\n- [Introduction](#intro)  \n\t- [JavaScript Installation](#js)\n\t- [CSS Installation](#css)\n\t- [Demo Videos](#demo)\n\t- [Reporting Issues and Feature Request](#bug)\n- [Enhancements](#enhance)\n\t- [Math and Multi Language OCR](#ocr)\n\t- [Timer and Counter](#timer)\n\t- [Mixed Text Direction](#dir)\n\t- [PDF Highlighter](#pdf)\n\t- [Enhanced YouTube Player ](#yt)\n\n<a name=\"intro\"/>\n\n\n# Introduction \n\nThis repository contains a set of JavaScript plugin/extensions (and their related CSS) for Roam Research. I call them enhancements because they improve my daily interaction with Roam. I will gradually add more extensions that I develop for my needs here and update the old ones. \n\nHere is the general installation guideline for all of the JavaScript and CSS codes. \n\n<a name=\"js\"/>\n\n## JavaScript Installation\n\nTo install, do the same thing you do for any roam/js script.\n\n1. Create page in Roam (if not already present) called [[roam/js]]\n\n1. Create a block in the [[roam/js]] page and enter {{[[roam/js]]}}\n\n1. Create a new block under the {{[[roam/js]]}} block and enter: ```\n\n1. This ``` create a code block for which you can select a language. \n\n1. Make sure the code language is set as **JavaScript**\n\n1. Paste the JavaScript code into the code block. Usually it looks something like this:\n\n   ``` javascript\n   window.parameters = {\n   \t//Parameters that you can customize \n   };\n   var s = document.createElement(\"script\");\n   s.type = \"text/javascript\";\n   s.src = \"https://c3founder.github.io/Roam-Enhancement/enhancedX.js\";\n   document.getElementsByTagName(\"head\")[0].appendChild(s);\n   ```\n\n1. A red warning box shows up asking you to review the risks of using roam/js.\n\n1. Once you have reviewed the warning and understand/accept the risk, click Yes.\n\n1. Refresh Roam and the script should now be installed!\n\n<a name=\"css\"/>\n\n## CSS Installation\n\nTo install the CSS put this line in a CSS code block on you [[roam/css]] page. Make sure the code language is set to **CSS**\n\n```css\n@import url('https://c3founder.github.io/Roam-Enhancement/enhancedX.css');\n```\n\n<a name=\"demo\"/>\n\n## Demo Videos\n\nI usually make YouTube demo video(s)  for each extension to explain functionalities and known issues. The main purpose of videos is to prevent confusion and ultimately reduce the number of questions I receive. So please watch them before sending in your questions!\n\n<a name=\"bug\"/>\n\n## Reporting Issues and Feature Request\n\nYou can report bugs and suggest new features through GitHub:\n\nhttps://github.com/c3founder/Roam-Enhancement/issues\n\nEach extension has its own label that you can use when reporting issues. \n\nI'll post community wetted solutions to issues here over time. \n\n<a name=\"enhance\"/>\n\n# Enhancements\n\n<a name=\"ocr\"/>\n\n## Math and Multi Language OCR\n\nThis extension OCRs images that you have in roam. It supports up to two languages plus math and handwritten text. Images do not need to be uploaded into your roam graph (i.e., no CORS issue). It works on extracted area highlights of the [PDF Highlighter](#pdf).\n\n#### JavaScript\n\n```javascript\nwindow.ocrParams = {\n    lang1: \"eng\", //Shift + Click\n    lang2: \"ara\", //Alt + Click\n    //Mathpix parameters\n    appId: \"YOUR_APP_ID\",\n    appKey: \"YOUR_APP_KEY\",    \n    //Cleanup Shortcut\n    cleanKey: 'alt+a c',\n\t//Edit options\n    saveRef2Img: false\n};\n\nvar s = document.createElement(\"script\");\ns.type = \"text/javascript\";\ns.src = \"https://c3founder.github.io/Roam-Enhancement/enhancedOCR.js\";\ndocument.getElementsByTagName(\"head\")[0].appendChild(s);\n```\n\n#### Functionalities\n- **Parameters** \n\tThe extracted text will be the child block of the image. If you are only interested in the extracted text and not the original image, you can \"cleanup\" by pressing the `cleanKey` shortcut: It will replace the image block with the extracted text and remove the text block. If you want to save a reference to the original image (just in case, as an alias) you can set `saveRef2Img: true`.\n\t\n- **Mathpix Support**\n\tYou need to set up a mathpix account and get an app id and key. Read more about mathpix great service [here](https://mathpix.com/#features). And find their API [here](https://docs.mathpix.com/#introduction).\n\n- **YouTube Demos**\n\t- New tutorial: \n\t[![ocrwithcors](https://img.youtube.com/vi/N8DOqIZQFLU/0.jpg)](https://www.youtube.com/watch?v=N8DOqIZQFLU)\n\n\t- Older tutorial:\n\t[![ocrgist](https://img.youtube.com/vi/BSVxxDsZVNQ/0.jpg)](https://youtu.be/BSVxxDsZVNQ)\n\n\n\n\n<a name=\"timer\"/>\n\n## Time and Habit Tracking\nThis is an ongoing effort to build a time+habit+goal tracker in roam. Timer and counter are done, stay tuned for statistics and habit tracker.  \n\n#### JavaScript\n\n```javascript\nvar s = document.createElement(\"script\");\ns.type = \"text/javascript\";\ns.src = \"https://c3founder.github.io/Roam-Enhancement/enhancedTimer.js\";\ndocument.getElementsByTagName(\"head\")[0].appendChild(s);\n```\n\n#### CSS \n\n```css\n@import url('https://c3founder.github.io/Roam-Enhancement/enhancedTimer.css');\n```\n#### Functionalities\n\n##### Timer \n{{[[c3-timer]]}} makes a stopwatch to track time spend on each block and its children. You can have multiple timers running but on each branch only one timer can be active. In other words, when you start a timer it will stop any other running timer on the same branch to prevent double counting. \n\n- **Shortcuts** \n\t- Click: Start/Stop \n\t- Shift Click: Open the timer's time entries in the right side bar\n\t- Control Click: On a running timer will delete the current time period\n\n- **Time Entry Format** You can manually edit the time and also put in duration. Here is the notation: \n\t- start > end \n\t- start + duration \n\t- end - duration \n\tAn example for the duration format is: 12h 5m 3s. \n\n- **YouTube Demo**\n\t- Timer set up tutorial: \n\t[![timersetup](https://img.youtube.com/vi/GR_eZDEE7jo/0.jpg)](https://youtu.be/GR_eZDEE7jo)\n\n##### Counter\n{{[[c3-counter]]}} makes is a counter that goes up/down by click/shift-click. You can also manually enter the count as {{[[c3-counter]]:count}}.\n\n<a name=\"dir\"/>\n\n## Mixed Text Direction\n\nThis extension detects right-to-left and left-to-right characters at the beginning of each block and changes the block direction. You can infinitely nest rtl and ltr blocks with no issue. You can also have different font for each of rtl and ltr languages. \n\n#### JavaScript\n\n```javascript\nvar s = document.createElement(\"script\");\ns.type = \"text/javascript\";\ns.src = \"https://c3founder.github.io/Roam-Enhancement/enhancedLanguage.js\";\ndocument.getElementsByTagName(\"head\")[0].appendChild(s);\n```\n\n#### CSS \n\n```css\n@import url('https://c3founder.github.io/Roam-Enhancement/enhancedLanguage.css');\n/* More fonts here: https://fonts.google.com/?subset=arabic \nFor example for 'Markazi Text', import the following: */\n@import url('https://fonts.googleapis.com/css?family=Markazi+Text'); \n@import url(//fonts.googleapis.com/earlyaccess/notonaskharabic.css);\n@import url(//fonts.googleapis.com/earlyaccess/notonaskharabicui.css);\n\n:root {  \n  --rm-block-sep-min-width: 0px;\n  /*****RTL Variables*****/ \n  --rtl-margin-right: 31px;\n  --rtl-margin-left: 31px; \n  --rtl-bullet-margin-top: 5px;\n  --rtl-control-margin-top: 4px;\n  --rtl-generic-font: sans-serif;\n  --rtl-font: 'Noto Naskh Arabic'; /*'Markazi Text'*/ /*Make sure you select the generic font first*/\n  --rtl-font-size: 1em;\n  --rtl-textarea-background-color: rgba(253,253,168,0.53);\n  --rtl-textarea-font-size: 1em;\n  --rtl-textarea-line-height: 1.75em;\n  /*****LTR Variables*****/ \n  --ltr-margin-right: 31px; \n  --ltr-margin-left: 31px; \n  --ltr-bullet-margin-top: unset;\n  --ltr-control-margin-top: unset;\n  --ltr-generic-font: unset; /*san-serif;*/\n  --ltr-font: unset; /*'Lato';*/ /*Make sure you select the generic font first*/\n  --ltr-font-size: unset; /*1em;*/\n  --ltr-textarea-background-color: rgba(253,253,168,0.53); /*unset;*/\n  --ltr-textarea-font-size: unset; /*1em;*/\n  --ltr-textarea-line-height: unset; /*1.5em*/\n}\n\n```\n\n#### Functionalities\nNew tutorial: \n- [![mixedrtl](https://img.youtube.com/vi/z3BoV-vkSRY/0.jpg)](https://www.youtube.com/watch?v=z3BoV-vkSRY)\n\nOlder tutorial:\n- [![rtl](https://img.youtube.com/vi/fp6akQlmyEw/0.jpg)](https://www.youtube.com/watch?v=fp6akQlmyEw)\n\n\n<a name=\"pdf\"/>\n\n## PDF Highlighter \n\nThanks to the following roamcult members who supported the development of this extension (no specific order): \n- [Abhay Prasanna](https://twitter.com/AbhayPrasanna)\n- [Owen Cyrulnik](https://twitter.com/cyrulnik)\n- [Stian Håklev](https://twitter.com/houshuang)\n- [Ryan Muller](https://twitter.com/cicatriz)\n- [Mridula Duggal](https://twitter.com/Mridgyy)\n- [Joel Chan](https://twitter.com/JoelChan86)\n- [Lester](https://twitter.com/lesroco)\n- [Ekim Nazım Kaya](https://twitter.com/ekimnazimkaya)\n- [Tomas Baranek](https://twitter.com/tombarys)\n- [Conor](https://twitter.com/Conaw)\n\n#### JavaScript\n\n``` javascript\nwindow.pdfParams = {\n  //Highlight \n  ///Placement\n  outputHighlighAt: 'cousin', //cousin, child\n  highlightHeading: '**Highlights**', //for cousin mode only \n  appendHighlight: true, //append: true, prepend: false\n  ///Rest of Highlight Options\n  breadCrumbAttribute: 'Title', //Title, Author, Citekey, etc. \n  addColoredHighlight: true,//bring the color of highlights into your graph\n  //Rerference to Highlight \n  ///Block References Related\n  copyBlockRef: true,//false: copy captured text\n  sortBtnText: 'sort them all!',//{{sort them all!}} button will sorted highlight references.\n  ///Block Reference Buttons  \n  aliasChar: '✳', //use '' to disable\n  textChar: 'T', //use '' to disable\t\n  //PDF Viewer\n  pdfMinHeight: 900,\n  //Citation \n  ///Format   \n  ////use Citekey and page in any formating string \n  ////page can be offset by `Page Offset` attribute. \n  ////common usecase: \n  /////Zotero imports with 'roam page title' = @Citekey and Citekey attribute\n  ////examples:\n  /////\"[${Citekey}]([[@${Citekey}]])\" \n  /////\"[(${Citekey}, ${page})]([[@${Citekey}]])\" \n  /////use '' to disable  \n  citationFormat: '',\n  ///BlockQuote \n  blockQPerfix: ''//use '' to disable. Alternatives are: > or [[>]].\n};\nvar s = document.createElement(\"script\");\ns.type = \"text/javascript\";\ns.src = \"https://c3founder.github.io/Roam-Enhancement/enhancedPDF.js\";\ndocument.getElementsByTagName(\"head\")[0].appendChild(s);\n```\n\n#### CSS \n\n```css\n@import url('https://c3founder.github.io/Roam-Enhancement/enhancedPDF.css');\n```\n\n#### Functionalities\nFull tutorial here: \n- [![pdfhighlighter](https://img.youtube.com/vi/-yVqQqUEHKI/0.jpg)](https://www.youtube.com/watch?v=-yVqQqUEHKI&ab_channel=CCC)\n\n<a name=\"yt\"/>\n\n## Enhanced YouTube Player \n\n#### JavaScript\n\nTo install, do the same thing you do for any roam/js script.\n\n```javascript\nwindow.ytParams = {\n  //Player\n  //Shortcuts\n  grabTitleKey : 'alt+a t',\n  grabTimeKey : 'alt+a n',  \n  ////Speed Controls\n  normalSpeedKey : 'alt+a 0',\n  speedUpKey: 'alt+a =',\n  speedDownKey: 'alt+a -',\n  ////Volume Controls\n  muteKey: 'alt+a m',\n  volUpKey: 'alt+a i',\n  volDownKey: 'alt+a k',\n  ////Playback Controls\n  playPauseKey : 'alt+a p', \n  backwardKey: 'alt+a j',\n  forwardKey: 'alt+a l'\n}; \n\nvar s = document.createElement(\"script\");\ns.type = \"text/javascript\";\ns.src = \"https://c3founder.github.io/Roam-Enhancement/enhancedYouTube.js\";\ndocument.getElementsByTagName(\"head\")[0].appendChild(s);\n```\n\n#### CSS\n\n~~~css\n@import url('https://c3founder.github.io/Roam-Enhancement/enhancedYouTube.css');\n~~~\n\n#### Functionalities\n\n##### Responsive/Resizable Player \nYou can set the original iframe size here in the code plus the border style. \n\n- **Parameters:** Border style of the video and its height and width when the right sidebar is closed. \n\t- borderStyle : border style \n\t- border : [border thickness](https://www.w3schools.com/jsref/prop_style_borderstyle.asp)\n\t- borderRadius : curvature of corners\n\t- vidHeight : height \n\t- vidWidth : width \n- **YouTube Demo**\n\t- [![responsive player](https://img.youtube.com/vi/vJ3gPX89fz0/0.jpg)](https://www.youtube.com/watch?v=vJ3gPX89fz0&ab_channel=ConnectedCognitionCrumbs)\n\n\n##### YouTube Timestamp \nYou can add timestamps to videos using a shortcut. \n\n- **Parameters:**\n  - grabTitleKey: if in a DIRECT child block of the YT video, grabs the title and paste it to the beginning of the current block.\n  - grabTimeKey: if in ANY child blocks of the YT video, it captures the player's current time and pastes it to the beginning of the block.\n- **YouTube Demo**\n\t- [![timestamp](https://img.youtube.com/vi/Kgo_Lkw-2CA/0.jpg)](https://www.youtube.com/watch?v=Kgo_Lkw-2CA&ab_channel=ConnectedCognitionCrumbs)\n\n\n##### In-text Controllable Player\nYou can control the YT player while you are typing. \n\n- If you have one player on the page, shortcuts will control the player, easy. \n- When multi YT players are present \n  - If only one is playing: shortcuts will control the playing one. \n  - If nothing is playing, shortcuts will control the last playing video you paused by shortcut (not mouse click). For example, you can mute/unmute or -10/+10 the last video you paused or play it with `alt+a p`.\n  - If multiple videos are playing, everything is ambiguous, so you can only control the first one (according to the order of appearance on the page). You can pause them all in order by `alt+a p`, though. \n\n- **Parameters:** \n\t- playPauseKey: play/pause the most recent player or the first one\n\t- backwardKey: go backward 10 sec\n\t- forwardKey: go forward 10 sec\n\t- normalSpeedKey: set the playback rate to 1\n\t- speedUpKey: increase the rate by .25\n\t- speedDownKey: decrease the rate by .25\n\t- muteKey: mute the player\n\t- volUpKey: increase volume by 10/100\n\t- volDownKey: decrease volume by 10/100\n- **YouTube Demo**\n- [![timestamp](https://img.youtube.com/vi/ADJvhW31xj4/0.jpg)](https://www.youtube.com/watch?v=ADJvhW31xj4&ab_channel=ConnectedCognitionCrumbs)\n\t\n- **Known Issues with Shortcuts:**\n\t- **Common installation problem:** You need to have the code block as the child of {{[[roam/js]]}} so you need a tab befor the code block.\t\n\t- **Shortcuts in mac:** I'm not a mac user, I've compiled this list based on feedback I received, this is why the language is uncertain; I have not tested them myself. Special thanks to [Abhay Prasanna](https://twitter.com/AbhayPrasanna) and [Jerome Wong](https://github.com/DarkArcZ).\n\t\t- For mac users 'option' instead of 'alt' has worked. \n\t\t\t- For example, you can replace 'alt+a n' with 'option+a n'\n\t\t- I specific keyboard modes 'option+a' will generate 'å' in mac. You can read about it [here](https://en.wikipedia.org/wiki/Option_key#Alternative_keyboard_input).\n\t\t\t- It seems you can fix this by changing the keyboard Input Source to \"Unicode Hex Input\" from \"ABC\".\n\t\t\t\t1. Go to Keyboard on your Mac System Preferences\n\t\t\t\t1. Click on Input Sources on the top\n\t\t\t\t1. Press the \"+\" button and add \"Unicode Hex Input\"\n\t\t\t\t1. Go to where you pasted the code on roam\n\t\t\t\t1. Change the shortcut key to something else besides alt (cmd, option, ctrl)\n\t\t\t\t1. Restart Roam\n\n\t- **General notes:**\t\n\t\t- To press 'alt+a n' you need to hold alt and a together for a fraction of a second (like when you press alt+tab to switch windows) and then RELEASE them and tap 'n'.\n\t\t- Make sure that the perfix 'alt+a' ('option+a' in mac), is not already assigned and captured by other programs. \n\t\t\t- Those programs can be installed on your operating system or be extensions in your browsers. \n\t\t\t- If there is a conflict, you need to change the shortcut of either that program or YT extension.\n\t\t- You can have 'alt+a+n' which means you need to hold all three buttons. \n\t\t\t- Pros: It is harder to miss compare to 'alt+a n'.\n\t\t\t- Cons: You need to make sure that there is no conflict with both sub-sequence key combination, i.e., 'alt+a' and 'alt+n'.\n\t\n\n", "dir"=>"/", "name"=>"README.md", "path"=>"README.md", "url"=>"/"}paginatorsiteJekyll::Drops::SiteDrop button will sorted highlight references.
  ///Block Reference Buttons  
  aliasChar: '✳', //use '' to disable
  textChar: 'T', //use '' to disable	
  //PDF Viewer
  pdfMinHeight: 900,
  //Citation 
  ///Format   
  ////use Citekey and page in any formating string 
  ////page can be offset by `Page Offset` attribute. 
  ////common usecase: 
  /////Zotero imports with 'roam page title' = @Citekey and Citekey attribute
  ////examples:
  /////"[${Citekey}]([[@${Citekey}]])" 
  /////"[(${Citekey}, ${page})]([[@${Citekey}]])" 
  /////use '' to disable  
  citationFormat: '',
  ///BlockQuote 
  blockQPerfix: ''//use '' to disable. Alternatives are: > or [[>]].
};
var s = document.createElement("script");
s.type = "text/javascript";
s.src = "https://c3founder.github.io/Roam-Enhancement/enhancedPDF.js";
document.getElementsByTagName("head")[0].appendChild(s);

CSS

@import url('https://c3founder.github.io/Roam-Enhancement/enhancedPDF.css');

Functionalities

Full tutorial here:

Enhanced YouTube Player

JavaScript

To install, do the same thing you do for any roam/js script.

window.ytParams = {
  //Player
  //Shortcuts
  grabTitleKey : 'alt+a t',
  grabTimeKey : 'alt+a n',  
  ////Speed Controls
  normalSpeedKey : 'alt+a 0',
  speedUpKey: 'alt+a =',
  speedDownKey: 'alt+a -',
  ////Volume Controls
  muteKey: 'alt+a m',
  volUpKey: 'alt+a i',
  volDownKey: 'alt+a k',
  ////Playback Controls
  playPauseKey : 'alt+a p', 
  backwardKey: 'alt+a j',
  forwardKey: 'alt+a l'
}; 

var s = document.createElement("script");
s.type = "text/javascript";
s.src = "https://c3founder.github.io/Roam-Enhancement/enhancedYouTube.js";
document.getElementsByTagName("head")[0].appendChild(s);

CSS

@import url('https://c3founder.github.io/Roam-Enhancement/enhancedYouTube.css');

Functionalities

Responsive/Resizable Player

You can set the original iframe size here in the code plus the border style.

YouTube Timestamp

You can add timestamps to videos using a shortcut.

In-text Controllable Player

You can control the YT player while you are typing.