CODEWITHSUNDEEP
javascriptjqueryhtml
Ash Bhimasani
Ash Bhimasani

Reputation: 45

Run Javascript/jQuery in Markdown

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?

Upvotes: 4

Views: 13156

Answers (1)

aug
aug

Reputation: 11714

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.

Upvotes: 5

Related Questions