Embed javascript in markdown

Question

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?

Send

Answer 1

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

Wetzel

Thank you, I spent a lot of time looking for a solution to this. – Treasurehouse

@TPAKTOPA basically instead of <script src='whatever'></script> do <script src='whatever'>{newline}</script> (sorry I can't seem to put a newline in the comment) – Wetzel

Didn't worked for me, I tryied it in online editor dillinger.io .You can't add new lines in comments, but you still able to edit original answer, and use code snippet :) Some example with alert(1) would be nice. – Bernal

@Bernal I looked at the dillinger source code and it doesn't use Maruku. This is a Maruku question, not a general Markdown question. – Wetzel

Did not work. There is the header-includes in a markdown, but probably not working in Jekyll. I could not get it to work in Jekyll, with Pandoc converting md to html header-includes works. – Sophrosyne

Answer 2

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 YAML front matter for Jekyll and nested lists for details)

Watters

Thank you! This is exactly where I ran into the issue - CodePen embed on a Jekyll site. – Thoer

This is great solution, however if you need to place the script somewhere between the text in the template, how do you do this? Like you mentioned, you wanted to use this for CodePen example (in my case I want to use this for JSFiddle example). So I need to place the script within the text of my markdown file. – Randolphrandom

Answer 3

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}
    ```

Feeling

thanks, works to with JSON, just add 'json' instead of 'js' – Sluggard

Answer 4

Markdown supports inline XHTML but not Javascript.

Unearth

Answer 5

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

Polyphyletic

it is markdown that is creating that... my actual code is <script src="http://code.jquery.com/jquery-1.4.2.min.js"></script> <script type="text/javascript"> – Send

In my experience, it's the newline that does it. – Siana

Answer 6

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.

Olivier

Answer 7

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'))

Seamus

Answer 8

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

Telegram

Answer 9

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.

Concede

Answer 10

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 %}

Wanderoo

Answer 11

Just indent the first line contains < script > tag.

Laggard