DEV Community


Bookmarklet for APL code on

bubbler4 profile image Bubbler Updated on ・1 min read

The default environment of 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='';document.body.appendChild(e);e=document.createElement('link');e.rel='stylesheet';e.href='';document.getElementsByTagName('head')[0].appendChild(e);s=document.createElement('style');s.innerHTML="@font-face{font-family:'APL386 Unicode';src:url('') 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:

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
  • for loading JS and CSS from GitHub

Discussion (1)

Editor guide
razetime profile image
Raghu Ranganathan

Thanks a lot!