Embed javascript in markdown

I'm using the Maruku markdown processor. I'd like this

*blah* blah "blah" in [markdown](blah)

<script src="http://code.jquery.com/jquery-1.4.2.min.js"></script>
<script>
...do stuff...
</script>

but it complains when I render it with a multitude of errors. The first one being

 ___________________________________________________________________________
| Maruku tells you:
+---------------------------------------------------------------------------
| Could you please format this better?
| I see that "<script type='text/javascript'>" is left after the raw HTML.
| At line 31
|   raw_html     |<script src='http://code.jquery.com/jquery-1.4.2.min.js' /><script type='text/javascript'>|
|       text --> |//<![CDATA[|

and then the rest seems like the parser is going nuts. Then it renders the javascript into a div on the page. I've tried making it a CDATA block and extra spacing between the jquery and my script.

Help?

I had this same problem, but I managed to get JavaScript to appear in my code by putting a newline after the opening tag.

Different solution that might work in some cases: (the selected answer didn't work for me when I was trying to embed a CodePen example)

• add this to your default layout:

    <!-- Custom JavaScript files set in YAML front matter -->
    {% for js in page.customjs %}
    <script async type="text/javascript" src="{{ js }}"></script>
    {% endfor %}
  

• In posts where you need some JavaScript files, you can add them in the YAML front matter like so:

    ---
    layout: post
    title: Adding custom JavaScript for a specific post
    category: posts
    customjs:
     - http://code.jquery.com/jquery-1.4.2.min.js
     - http://yourdomain.com/yourscript.js
    ---
  

The async might not be necessary or wanted but you could probably add that as a parameter in customjs. (see https://stackoverflow.com/questions/12761152/yaml-front-matter-for-jekyll-and-nested-lists for details)

I use this code to write JavaScript code in markdown.

> just add js after "```" , and you'll have your JavaScript code highlighted.

 ```js
   const myvar = "hello"
   module.exports.response = response = ()=>{mycode here}
    ```

Markdown supports inline XHTML but not Javascript.

The example they give on their site shows an empty <script> tag containing a newline. Maybe that's it?

I found that escaping the closing '>' symbol in both, the opening and closing 'script' tags, will display it correctly, for example:

• If you type the follwing:

    <script\>... javascript code...</script\>
  

• It will be rendered like this:

    <script>... javascript code...</script>
  

That's just my two cents.

I built an express server with a library called Showdown that converts markdown to HTML, and also will let you use HTML in your markdown file, and this is how I am able to use javascript and also link to my css file.

TOC.md

<script src="/js/toc"></script>

server.js

app.get('/js/toc', (req, res) => {
    fs.readFile(path.join(__dirname, 'public', 'js', 'toc.js'), 'utf-8', (err, data) => {
        if(err) throw err;
        res.set({
            'Content-Type': 'text/javascript'
        })
        res.send(data)
    })
})

Or you could do it using express static middleware. You would just need to put your javascript file inside a folder called public.

TOC.md

<script src="/static/js/toc.js"></script>

server.js

app.use('/static', express.static('public'))

You could use pandoc, which handles this input (and javascript generally) just fine.

To my experience, markdown will outpus javascript text as plain text as long as you remove the code formatting that may confuse markdown.

1. remove comments from javascript, as /* ... */ is translated to < em>
2. remove the space indent in the front of each line. < p> may be inserted according to your indentation.

Basically what I do is to review the generated html and find out what extra tags are inserted in between my javascript code by markdown. And remove the formatting that generates the extra tag.

A good idea is to have local and cloud js sources separated:

In the post file:

cloudjs:
 - //cdnjs.cloudflare.com/ajax/libs/d3/3.5.3/d3.min.js
 - //cdnjs.cloudflare.com/ajax/libs/topojson/1.6.9/topojson.min.js
localjs:
 - datamaps.world.min.js
 - custom.js  

In the default file after footer inclusion:

   {% for js in page.cloudjs %}
    
		<script type="text/javascript" src="{{ js }}"></script>
		
	{% endfor %}
	
	    
    {% for js in page.localjs %}
    
		<script type="text/javascript" src="{{ "/assets/scripts/" | prepend: site.baseurl | append: js }}"></script>
		
	{% endfor %}

Just indent the first line contains < script > tag.