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?

score 36 · Accepted Answer · answered Aug 28 '11 at 07:08

36

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

answered Aug 28 '11 at 07:08

S M

7,744
3
32
36

Thank you, I spent a lot of time looking for a solution to this. – Jack Apr 29 '13 at 21:08
@TPAKTOPA basically instead of `` do `` (sorry I can't seem to put a newline in the comment) – S M Sep 15 '15 at 18:02
1

Didn't worked for me, I tryied it in online editor http://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. – TPAKTOPA Sep 16 '15 at 08:51
@TPAKTOPA I looked at the [dillinger source code](https://github.com/joemccann/dillinger) and it doesn't use Maruku. This is a Maruku question, not a general Markdown question. – S M Sep 16 '15 at 16:12
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. – Timo Jan 16 '21 at 20:27

score 17 · Answer 2 · edited May 23 '17 at 12:09

17

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)

edited May 23 '17 at 12:09

Community

1
1

answered Jul 19 '13 at 18:59

Timothée Boucher

1,445
11
27

Thank you! This is *exactly* where I ran into the issue - CodePen embed on a Jekyll site. – brenna Feb 03 '14 at 06:14
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. – emil.c Apr 30 '16 at 18:55

score 6 · Answer 3 · answered Jun 07 '20 at 12:47

6

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

answered Jun 07 '20 at 12:47

oussama boumaad

99
1
3

Jon Purdy · Answer 4 · 2013-10-22T01:51:02.380

3

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

edited Oct 22 '13 at 01:51

answered May 02 '10 at 18:15

Jon Purdy

49,516
7
90
154

it is markdown that is creating that... my actual code is ` – Paul Tarjan May 02 '10 at 20:18
In my experience, it's the newline that does it. – James A. Rosen Nov 09 '12 at 20:35

score 3 · Answer 5 · answered Feb 23 '11 at 08:52

3

Markdown supports inline XHTML but not Javascript.

answered Feb 23 '11 at 08:52

Mike Chelen

372
2
9

score 1 · Answer 6 · answered Jun 16 '12 at 16:37

1

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

answered Jun 16 '12 at 16:37

John MacFarlane

7,819
34
32

score 1 · Answer 7 · answered Oct 14 '13 at 16:37

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.

Sarah Cheatham · Answer 8 · 2020-12-03T17:04:39.727

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

score 0 · Answer 9 · answered May 24 '12 at 05:11

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

remove comments from javascript, as /* ... */ is translated to < em>
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.

score -2 · Answer 10 · answered Sep 25 '17 at 22:02

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

score -2 · Answer 11 · answered Feb 12 '19 at 13:33

-2

Just indent the first line contains < script > tag.

answered Feb 12 '19 at 13:33

PhanThanh

1

Embed javascript in markdown

11 Answers11

Linked