Bookmarklet for APL code on dev.to

#apl

The default environment of dev.to is not optimized for APL code in multiple ways:

Fonts do not support APL glyphs
Syntax highlighting for APL is not supported

Since we cannot inject JS and CSS directly into posts, here is a bookmarklet to change any plaintext code blocks into APL syntax-highlighted blocks and use an APL-friendly font.

javascript:[...document.getElementsByClassName('plaintext')].forEach(x=>x.classList.add('language-apl'));e=document.createElement('script');e.src='https://rawcdn.githack.com/Bubbler-4/dev-to-apl/master/prism.js';document.body.appendChild(e);e=document.createElement('link');e.rel='stylesheet';e.href='https://rawcdn.githack.com/Bubbler-4/dev-to-apl/208551a202e8b9bdcde60c6c631d934110ea7e14/prism.css';document.getElementsByTagName('head')[0].appendChild(e);s=document.createElement('style');s.innerHTML="@font-face{font-family:'APL386 Unicode';src:url('https://rawcdn.githack.com/abrudz/APL386/4678fcf468cf4c5801254ba7f649de78d9ab7df6/APL386.ttf') format('ttf');}:root{--ff-monospace:'APL386 Unicode';}";document.body.appendChild(s);void 0;

Here is some APL code for testing:

Inline code: ⍎⊖⍕⊃⊂|⌊-*+○⌈×÷!⌽⍉⌹~⍴⍋⍒,⍟?⍳0
Code block:

      ⍎⊖⍕⊃⊂|⌊-*+○⌈×÷!⌽⍉⌹~⍴⍋⍒,⍟?⍳0
42

Special thanks to:

Adám Brudzewsky's APL386 Unicode font
Prism.js for syntax highlighting, because this is the only one that comes with APL syntax definition
raw.githack.com for loading JS and CSS from GitHub