Log in Sign up

Issue with JavaScript in my post?

I've picked up blot because I really like taking notes in Obsidian, and your site seemed like an amazing alternative to their publishing service, really enjoying it so far.

I use quite a few javascript extensions in my notes, things like Mermaid.js and most recently jTab for Guitar Tablature. I was wondering if there was a way to incorporate these into my posts?

I've converted a markdown (.md file) to HTML, and have the requisite javascript calls in the header of the file, but it seems no matter which way I try to get the calls to jTab working, it never does. Just viewing the .html file in browser everything renders as expected, but not in the post on blot. Is there just no support for Javascript in your HTML files? Or is there some other backend thing I need to do to get things working?

I'd really like to not have to snip seperate pictures of everything I have rendered in my notes through JS stuff, as I'll probably end up having quite a bit as my post count grows.

5 replies

You can definitely embed JavaScript in your posts. Are you sure the path to the JavaScript file is resolving correctly?

Would you be willing to share a link to a post with broken JS so we can take a look?

Answered 4 months ago · Improve this answer

Sure, link to draft post in question is here: https://fringenerd.blot.im/draft/view/[draft]Hal's%20Bass%20Lessons%20-%20Part%201.html

Raw HTML: https://fringenerd.blot.im//[draft]Hal's%20Bass%20Lessons%20-%20Part%201.html

The two sections in question are in:

<div id="mytab"></div>
<script type="text/javascript">
'$E 0 1 2 3 4 | $A 0 1 2 3 4 | $D 0 1 2 3 4 | $G 0 1 2 3 4 |');


<div class="jtab">
$A 3 5 $D 2 3 5 $G 2 4 5 ||

Links to required javascript libraries are in my head.html file:

    <!-- mandatory script includes for jtab -->
    <script src="http://jtab.tardate.com/javascripts/jquery.js" type="text/javascript"></script>
    <script src="http://jtab.tardate.com/javascripts/raphael.js" type="text/javascript"></script>
    <script src="http://jtab.tardate.com/javascripts/jtab.js" type="text/javascript"></script>

You should be able to view those without needing my login. but yeah, let me know what I'm doing wrong. Thanks!

Answered 3 months ago · Improve this answer

I opened up my browser console and I see a few mixed-content warnings. This happens when you load HTTP resources from a page served over HTTPS. Try embedding your scripts like so instead (note change of protocol from HTTP to HTTPS):

  <!-- mandatory script includes for jtab -->
    <script src="https://jtab.tardate.com/javascripts/jquery.js" type="text/javascript"></script>
    <script src="https://jtab.tardate.com/javascripts/raphael.js" type="text/javascript"></script>
    <script src="https://jtab.tardate.com/javascripts/jtab.js" type="text/javascript"></script>

Does that resolve the issue?

Answered 3 months ago · Improve this answer

Hey! That did the trick. Odd that the jtab uses an incorrect example in their documentation, I'll let them know.

It even works for the markdown version of the post, so I don't have to do any kind of converting.

Thanks for the Help!

Answered 3 months ago · Improve this answer

Great, I suppose their example is not technically wrong – it will work on a page loaded over HTTP – anyway, please let me know if anything else comes up

Answered 3 months ago · Improve this answer

Markdown allowed
Question or feedback?
Contact us


developers 61 questions bug 30 questions templates 21 questions posts 20 questions meta 19 questions metadata 17 questions resolved 16 questions how 12 questions markdown 9 questions tags 9 questions More tags →
Subscribe for changes
RSS Feed of latest questions