Questions Issue with JavaScript in my post?

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.

a year ago, 5 replies posts html Improve this question

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 a year 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">
    jtab.render($('#mytab'),
'$E 0 1 2 3 4 | $A 0 1 2 3 4 | $D 0 1 2 3 4 | $G 0 1 2 3 4 |');
</script>

and:

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

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 a year 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 a year 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 a year 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 a year ago · Improve this answer