DEV Community

loading...

Bookmarklet for APL code on dev.to

bubbler4 profile image Bubbler Updated on ・1 min read

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

Discussion (1)

pic
Editor guide
Collapse
razetime profile image
Raghu Ranganathan

Thanks a lot!