Run Javascript/jQuery in Markdown

Question

Currently I have a website hosted on Github Pages that runs on Jekyll with a main index.html file as the homepage that links to pages written in markdown. I got the Fluidbox jQuery plugin to work correctly in HTML but not in my markdown files. I dropped the jQuery code in my footer which is loaded on every page:

<!-- Load jQuery -->
 <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>

 <!-- Load plugins -->
 <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery-throttle-debounce/1.1/jquery.ba-throttle-debounce.min.js"></script>
 <script type="text/javascript" src="./fluidbox/js/jquery.fluidbox.min.js"></script>

 <!-- JS Functions -->
 <script>
     $(function () {

         // You can use any kind of selectors for jQuery Fluidbox
         $("a[data-fluidbox]").fluidbox();

  });
 </script>

</footer>

I then use

<a href="path to image" data-fluidbox><img src="path to image" alt="" width="100%" height="auto"/></a>

to implement the plugin's effect on an image. This works in my HTML files not my Markdown files. How can I properly run a jQuery plugin in a Jekyll markdown file?

score 5 · Answer 1 · edited May 23 '17 at 12:02

You can't run HTML/JS in markdown files, simply because markdown is not actually anything that understands how to run HTML/JS. The only reason your markdown files are rendering correctly is because Jekyll is parsing your markdown files and rendering them as HTML/JS behind the scenes.

If you want to run some HTML/JavaScript whilst having Markdown in some of your files, you are better off having your HTML files rendering markdown snippets and then whatever HTML/CSS/JS you need, you can add those because, well, it's an HTML file. Take a look at how you would embed markdown in an HTML file here.

Run Javascript/jQuery in Markdown

1 Answers1