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.


2 years ago, 5 replies   posts   html   Edit 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 2 years ago · Edit 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 2 years ago · Edit 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 2 years ago · Edit 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 2 years ago · Edit 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 2 years ago · Edit answer