Bookmarklet for APL code on dev.to

Bubbler — Mon, 03 Aug 2020 05:37:07 +0000

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

DEV Community: Bubbler

Bookmarklet for APL code on dev.to