Home → Suggestions →

Preference to inject a block or file of JavaScript for custom syntax highlighting or other processing?

• Edit

mark

19 Mar, 2023 04:53 PM

I use Marked2 to preview document stored in DEVONthink. I would like to use the same syntax highlighter with Marked 2 that I do with DEVONthink. I use a custom implementation of Prism.
How can I get Marked 2 to inject some JavaScript to ALL files that it processes rather than entering the script in each file. I need this to be a Marked 2 preference.

Could a way be made to allow a file or a block of code to be injected into the HEAD of the rendered/processed HTML?

1. Support Staff 1 Posted by Brett on 19 Mar, 2023 08:09 PM

   

   I've considered allowing this before, but don't have current plans to
   make it a preference option. However, you can, with a little effort,
   create a custom preprocessor to inject anything you want into the source
   prior to rendering.

   A custom preprocessor would be a script that basically just took the
   STDIN input (via `cat` if a shell script), and output it along with
   whatever content you wanted to add. You would then make the script
   executable, and add the path to the script to the Advanced->Custom
   Preprocessor pane in Preferences. Let me know if you need further
   details on how that would work. I can provide an example script if
   needed.

   -Brett

   On 19 Mar 2023, at 11:55, mark wrote:

   • Edit

2. 2 Posted by mark on 19 Mar, 2023 09:15 PM

   

   Okay.
   I tried this, but it does not appear to be working. What am I doing wrong?

   I made a "preprocessor", the following shell script.

   #!/bin/sh
   inject='<script src="/Users/mmynsted/devonthink/prism.js"></script>'
   printf "%s\n%s" "$inject" "$(cat)"
   

   I set the custom preprocessor. See screen-shot.
   I made a test file, test.md. See attached.

   I opened the file in Marked2 and reviewed the preprocessor log. It looks fine to me.
   What is strange is that the Prism script does not appear to be executing. Should I reference it differently?

   ---

   Also I replied to the wrong message in support.markedapp.com/discussions. I see no way to delete my comment. Would you please delete my comment here -> http://support.markedapp.com/discussions/suggestions/487-customizin...

   • test.md 482 Bytes
   • Screen_Shot_2023-03-19_at_16.06.18.png 216 KB
   • Screen_Shot_2023-03-19_at_16.01.05.png 185 KB
   • Screen_Shot_2023-03-19_at_16.10.58.png 93.9 KB
   • Edit

3. 3 Posted by mark on 19 Mar, 2023 09:19 PM

   

   Actually it looks like it works only if I use both the custom preprocessor and a custom processor.

   • Edit

4. 4 Posted by mark on 19 Mar, 2023 09:19 PM

   

   In this case I want to be able to use these separately.

   • Edit

5. 5 Posted by mark on 19 Mar, 2023 11:31 PM

   

   In any case, the custom preprocessor looks useful.

   • Edit

6. Support Staff 6 Posted by Brett on 20 Mar, 2023 12:06 AM

   

   It's been a while since I looked at it, but the preprocessor may be suffering from the main processor stripping the script tag out for safety, and then rendering without it. I don't see the tag appearing in the actual DOM, so I may have given you bad advice. If you want to use it as the actual processor, you'll also need to include a step that renders it using your Markdown processor of choice (output from the processor is displayed raw and expects HTML).

   You'll probably also run into an issue when the preview updates, as it will simply replace the inner contents of the preview but not actually reload. In this case you'll want to use the Marked.hooks.register() function to add a reload function.

   In short, Marked really isn't designed to handle custom javascript well. I've made efforts to allow it with some work on the user's part, but the entire window is built on my own JavaScript and allowing other scripts to load often leads to built-in features not working, and it's not as easy as just allowing an injection from preferences.

   -Brett

   On 19 Mar 2023, at 18:31, mark wrote:

   • Edit

7. 7 Posted by mark on 20 Mar, 2023 03:56 PM

   

   It's been a while since I looked at it, but the preprocessor may be suffering from the main processor stripping the script tag out for safety, and then rendering without it.

   I followed this.
   But for a simple test, did not add the second part.

   <script>
   Marked.hooks.register('update', function() { mermaid.init(undefined, $('.mermaid')); });
   </script>
   

   I did not see one, but is there perhaps an undocumented, special syntax to permit the inclusion of JavaScript?

   Special Syntax

   I saw the file include, but I suspect whatever is removing the JavaScript for safety would remove it from a file include also.

   If there is not a special syntax, then I will not worry about injecting JavaScript for preprocessing.

   Thank you for your help.

   • Edit

8. Support Staff 8 Posted by Brett on 20 Mar, 2023 05:32 PM

   

   There's no special syntax for including scripts, although if you're using the MultiMarkdown processor, you can add a xhtml header: meta key and include a script that way. It would have the same effect, though.

   It appears I was wrong about Marked stripping scripts out, using just a preprocessor to inject, when I open the Inspector (right click, inspect element), the Prism functions are available in the console.

   Testing with a default version of Prism.js and the preprocessor you created, I do actually see prism loading I think that nothing is triggering the highlighting, though, which is where the hook would come in. Something that calls Prism's highlight function. It would also need to trigger for an initial render (on document ready).

   #!/bin/sh
   inject='<script src="/Users/ttscoff/Downloads/prism.js"></script>'
   after="<script>Marked.hooks.register('update', function() { \$('pre code').each(function(i, n) { Prism.highlightElement(i) }); })</script><script>Marked.hooks.triggerUpdate();</script>"
   printf "%s\n%s\n%s" "$inject" "$(cat)" "$after"
   

   The above doesn't actually work, as I haven't dug into how exactly Prism's functions work, but it seems to be on the right track. If you have a little JS experience, you can probably figure out what needs to be done from there.

   • Edit

9. 9 Posted by mark on 29 Feb, 2024 07:30 PM

   

   Thank you. I will check it out. :-)

   • Edit