Custom JavaScript in DTTG?

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:

  1. Notes render faster
  2. I no longer need to deploy my CSS to CloudFront.
  3. 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.

Thank you for the suggestion. Noted!

2 Likes

Than with stylesheets and JS stored in AWS? I’d expect that.

Keep in mind that these notes will only render correctly inside DT(TG)! If you ever want to preview them in an external MD renderer or convert to HTML for delivering via a web server, they won’t render correctly. In these cases, you should stick with a CSS/JS stored where it is accessible for the browser, e.g. a web server or a cloud location.

Why would that be a “shorthand HTML tag notation”? It’s plain wrong, as both start and end tag are required for script elements:

https://developer.mozilla.org/en-US/docs/Web/HTML/Element/script#technical_summary

You should always refer to the MDN site for information on HTML, CSS and JavaScript. It is the most up-to-date and complete one, in my experience.

I’ve gone a bit further with this idea, indexing my custom DT CSS and JS files so that they are always up to date in my “Notebox” database. Then, from DT on macOS I can simply refer to them using their x-devonthink-item:// URLs. Everything works perfectly on macOS and I can remove the <link href='CloudFrontURL/dt.css' rel='stylesheet' /> and <script src='CloudFrontURL/dt.js'></script> lines from my Markdown notes.

As shown in the attached screenshot, I have:

  • CSS: x-devonthink-item://ABB1FDEA-4BFF-4F7E-B819-6F535098E340
  • JS: x-devonthink-item://BBFC2DD0-EB3C-4513-87A8-E29A60970ECA

However, DTTG I cannot enter “Additional JavaScript” the way I can do with “Additional CSS”. Please can this be considered? This will allow my notes to render correctly on both iOS / iPadOS as well as macOS without needing to have <script src='CloudFrontURL/dt.js'></script> in every single file (just so the notes render correctly on iOS).

Did you overlook the first reply you got?

Yes, it seems so. Memory ain’t what it used to be :blush:.

@eboehnisch, Any update?

No, there is nothing to report on this.