I use a custom stylesheet and JavaScript (with a customized version of Prism.js, and some other bits) for rendering Markdown files. Both CSS and JS files are currently deployed to an AWS CloudFront distribution and referenced in my Markdown note files using <link href='CloudFrontURL/dt.css' rel='stylesheet' />
and <script src='CloudFrontURL/dt.js'></script>
. Notes render perfectly on both macOS and iOS.
Recently (yes, I should read the release notes more frequently), I discovered that, in Settings for DT on macOS (Settings > Files > Markdown) there are two text fields which allow either selecting custom CSS and JS files to use for all Markdown files. Changing those to point to the two CloudFront URLs works perfectly, allowing me to (potentially) remove the <link ...>
and <script ...>
lines from my notes and achieve note nirvana.
On iOS, however, there is only an option to specify a CSS file, with no ability to specify a JS file. Since there are checkboxes in Settings on iOS to enable Prism, MathJax, etc. it is clear that JavaScript, per se, is not the issue.
Further, I have recently explored the idea of storing my CSS and JS files within DT discovered that I could paste x-devonthink-item://...
links to the CSS and JS files in the Style Sheet and JavaScript text boxes in Settings on macOS. Doing so works perfectly (on macOS) and notes render faster. On iOS the stylesheet renders perfectly but (obviously) the JavaScript doesn’t run unless I reference it explicitly from within each note (using the <script...>
approach).
Might it be possible to add support to the iOS version of DT to permit specifying a JavaScript file as is currently possible within the Mac version?
As an aside:
The documentation says one can “paste the URL of an online stylesheet” but could be extended to also mentione that one can paste x-devonthink-item://...
links, perhaps with an example.
Storing my CSS and JS within DT is attractive because:
- Notes render faster
- I no longer need to deploy my CSS to CloudFront.
- It works on both macOS and iOS (assuming this request is approved)
Interesting observation:
Linking to a JavaScript file using <script src='CloudFrontURL/dt.js'></script>
works, while using the shorthand HTML tag notation (<script src='CloudFrontURL/dt.js' />
) doesn’t. In the second case the JavaScript simply fails to run. I’m not sure if this in HTML thing or something specific to DT’s implementation.