I have a site hosted on GitHub pages, using Jekyll and Markdown code.
It seems like Jekyll doesn’t render any code that’s not in Markdown properly. I have custom JavaScript code to embed that’s supposed to allow users to make donations to my Stripe payment account. The JavaScript code is directly from Stripe, with HTML tags and everything. But Jekyll renders the code by printing most of it. I suppose because it’s not in Markdown code.
Help! Please!
HTML is allowed in Markdown you just need to be careful with the indents and/or remove them as they can be misinterpreted.
So if there are zero indents in the HTML/JavaScript code, it’ll be fine?
Yes, that’s my experience.
Indenting tells Markdown to convert into a code block, which is probably why it’s getting mangled for you.
You can have indented html tags in a markdown file and it won’t get converted to plain text.
Just avoid empty lines. You can add them in a certain way but start with no empty lines.
Use .md or .html extension. Both work fine for html tags
Here is one of my pages with html and JS in markdown.
It looks funny if you view it as markdown on github but it’s fine in an IDE or rendering as a page. You can click the raw button to see how it looks
Excellent! Thank you.
Unless it’s a one-off for a single page, I would include the snippet in the post’s/page’s template. If the snippet should be included on some pages, you can use a custom front matter variable to enable/disable the snippet. Alternatively, you could create an include with the snippet and include it in your markdown files where you need it.
@MichaelCurrin The link is not working. I would like to see javascript embedded in md. This is possible, and I would like to use it with jekyll. I use Pandoc to convert, but want to change the game.
I renamed the file - see below. My script tag is at the bottom of the file (It doesn’t need to be in head) but it could easily be in an includes file or a layout.
There aren’t layouts in repo to shared but I assume you shared file because header-includes variable gets inserted into the head tag.
@MichaelCurrin thanks, can I include a js file instead of pasting code at the bottom? There is header-includes in markdown, but it does not work maybe.
Sure.
If you want to move it to an includes file.
listSnippet.html
<script>
var options = {
valueNames: [
{
name: 'list-name',
attr: 'data-name'
}
]
};
var userList = new List('repos', options);
</script>
Then in default.html or head.html
<head>
{% include listSnippet.html %}
</head>
You could make your snippet as a .js file and then include as
<head>
<script>
{% include listSnippet.js %}
</script>
</head>
But that is an uncommon pattern is Jekyll and also more verbose where you use the snippet.
Or you can add the file to assets as assets/js/list.js
<script src="{{ site.baseurl }}{% link assets/js/list.js %}" </script>
ok, can I include a js file in markdown? header-includes does not work in Jekyll. I can paste the js code to the bottom md file as a workaround.
Yes you can use .html or .md or .js when you use include tag though mostly it should be .html
Can you explain what header-includes is? I have not heard that term.
My examples below work for any kind of includes - html, md, js, even .css if you wanted.
If you want an includes file to be used on one page, you use it on the page.
---
---
My content
{% include foo.html %}
If you want it to be used on all pages with say layout post, then you edit that.
_layouts/post.html
---
layout: default
---
<div class="post-content">
</div>
{% include foo.html %}
If you want on every page, then add it to default.html layout
<head>
<script src="jquery.js"></script>
{% include foo.html %}
</head>
<body>
{{ content }}
</body>
And if your default layout uses a head.html includes such as below, then put it in head.html.
{% include head.html %}
<body>
{% include header.html %}
{{ content }}
</body>
Remember that head is for metadata and assets the user can’t see even when they are loaded. body is what they can see - is control how images and text and assets appear for the user.
And in the body you might have a header tag which contains the navbar and site logo. And it might exist as its own header.html includes file.
See minima theme as a reference for layouts and includes
This is fine, will try.
I got the header-includes from Pandoc: Pandoc - Pandoc User’s Guide
… and Pandoc is not Markdown, but a parser as probably Jekyll is.
I am trying to follow up with you, thanks for the help.
Pandoc is a tool, like Jekyll, that processes documents in HTML, markdown etc. and generates output.
Pandoc is broader - it makes documentation for Python projects, it handles latex and Word and makes PDFs I see.
Jekyll is built around static sites so probably a better choice for making a website. Unless you need something specific that Pandoc only can do.
Header-includes is not related to markdown, is more about storing a value in YAML and executing as part of templating.
In pandoc searching, I see this is what header-includes is about.
---
header-includes:
- [LATEX COMMAND]
---
Jekyll does not support running arbitrary Ruby etc. commands set a field like that.
The YAML is generally just configs and data
But if you set a value in your frontmatter, you can use as a variable on that page or in any layout that the page uses.
Here I have a multi line value for a JS snippet. Using pipe | so i don’t need quotes.
---
title: Foo
my_js_snippet: |
console.log("hello")
console.log("world")
---
Welcome to {{ page.title }}
<script>
{{ page.my_js_snippet }}
</script>
Or you can insert a page’s value into head the top of the page like this. That means you can take out the script section from the bit above.
_layouts/default.html
<head>
{% if page.my_js_snippet %}
<script>
{{ page.my_js_snippet }}
</script>
{% endif %}
</head>
<body>
{{ content }}
</body>
Now any page that has my_js_snippet set will get a script tag added to the top using the custom JS set for that specific page.
thanks, can I do:
{% include foo.js %} in a .md so that the js gets interpreted? I still think that is not possible in a .md file, only in a .html.
In a md, with include I get the raw js code which I do not want.
What do you mean interpreted? Versus raw? I need to see the code you are getting and the code you expect.
Using includes means Jekyll copies the content of the includes file (whether JS or markdown or HTML) into the the current page.
And then evaluates and Liquid e.g. {{ }}
If the extension is .md then you can put markdown in it.
- [a](https://example.com)
{% include foo.md %}
There is nothing magical about the JS extension for an includes file. Jekyll will not run or convert your JavaScript. It will only copy the contents of the includes file into the page so the browser and execute it.
As I mentioned before, put your JS in an HTML file. This will cause less confusion and is more Jekyll style.
my_snippet.html
<script>
console.log("hello")
</script>
Use as
{% include my_snippet.html %}
Inside a .html or .md page or layout.