Is there a way to include an HTML partial from a Markdown file with Jekyll?
Example:
File index.md:
---
layout: default
title: Home
---
This is a [Markdown](http://daringfireball.net/projects/markdown/) file.
{% include foobar.html %}
File _includes/foobar.html:
<ul>
<li>Foo</li>
<li>Bar</li>
</ul>
This unfortunately does not seem to work in my case.
For completeness, here is the entire content of my _config.yml file:
encoding: utf-8
markdown: kramdown
baseurl:
A common reason the html shows up as plain text is when the html snippet is indented with at least four spaces.
This causes jekyll to interpret the html as a code block that is to be displayed literally.
(I know this was already mentioned in the comments, but it took me a while to find and understand that I had the exact same problem)
If the .md file you mentioned is located in _posts and the layout type is post, you can use markdown="0" or "1" to set related part as Markdown or HTML as you like because you configurated markdown to kramdown. Try following code:
---
layout: post
title: Home
---
# Markdown part
This is a [Markdown](http://daringfireball.net/projects/markdown/) file.
<section id="categories" markdown="1">
A list of categories:
- foo
- bar
</section>
<div id="html" markdown="0">
<h1>HTML part</h1>
<ul>
<li>Foo</li>
<li>Bar</li>
</ul>
</div>
If the .md file you mentioned is located in _includes, _layouts or page, you can directly use your code or change the layout type to page:
---
layout: default
title: Home
---
This is a [Markdown](http://daringfireball.net/projects/markdown/) file.
{% include foobar.html %}
See an example here: https://raw.githubusercontent.com/plusjade/jekyll-bootstrap/master/index.md.
Just enjoy.
Related
I'm trying to use Kramdown's auto "Table of Contents" generator on a page (not a post) on my Jekyll site.
_includes/toc.html
<nav>
<h4>Table of Contents</h4>
{:toc}
</nav>
my_cool_stuff/my_cool_page.md
---
layout: page
---
{% include toc.html %}
# The title of my page
## The Subtitle of my page
The HTML is generated literally and I'm not getting a list of headers.
<nav>
<h4 class="toc_title">On This Page</h4>
{:toc}
</nav>
What am I setting up wrong?
{:toc} is kramdown tag for automatic Table of content generation.
In your case, you need two more things to make it work :
Allow kramdown to parse inside html blocks : in _config.yml add :
kramdown:
parse_block_html: true
in _includes/toc.html, you need to provide a seed list :
<nav>
<h4>Table of Contents</h4>
* this unordered seed list will be replaced by toc as unordered list
{:toc}
</nav>
I wanted to do something similar but was trying to avoid having any kind of markup in my post page, similar to your {% include toc.html %}.
I found this great Ruby Gem - jekyll-toc that allows you to place a TOC anywhere in a layout file. You enable it in the front matter.
I've created a default web _layout for my jekyll site. Liquid tags get processed as expected in the default.html which is great. In the excerpt below, the loop and post.url & post.title expand as expected. But I want to load the content into the with id="page-content-wrapper". The content that load in the div comes from pages/blog.html. If I put Liquid directives in that file, jekyll is not processing them, so the content that renders just show the literal "{{ content }}".
How do I get jekyll to process the liquid tags in the pages/blog.html?
OK, get it !
Your pages are not generated by jekyll, they are just copied as static files.
In order to generate your pages, your need to add a front matter to them.
page/home.html
---
layout: null
---
<div class="row-fluid">
<div class="row">
<div class="col-md-8">
<h1>Home Page</h1>
{{ site.name }}
<p>Content will go here</p>
</div>
<div class="col-md-4">
<h3>Sidebar</h3>
<p>Sidebar content goes here.</p>
</div>
</div>
</div>
This will generate the html fragment needed by your ajax call. Do this on every file in pages folder.
A little problem come with your permalink setup permalink: pretty. With this setup, pages/home.html becomes pages/home/index.html and your ajax call returns a 404 error.
You can set permalink: :title and it will work fine.
Markdown is not being convertedto HTML.
_config.yml
# Build settings
markdown: kramdown
input: GFM
# Permalinks
permalink: pretty
encoding: UTF-8
output in frontend
<article class="post-content">
<!-- Contents of md files here in plain text-->
</article>
As described in the kramdown Syntax you have to enable parsing of markdown in html-block elements. There are two ways to do this:
Globally: in your _config.yml add:
kramdown:
parse_block_html: true
or at the beginning of your markdown document (not in yaml-header) set:
{::options parse_block_html="true" /}
Locally: add markdown="1" to your html-block, to get the markdown inside the block rendered.
So in your case that would read:
<article markdown="1" class="post-content">
<!-- Contents of md files here in plain text-->
</article>
I had this line:
markdown_ext: "markdown, mkdown, mkdn, mkd, md"
which was messing it up
I want to introduce hash links to the headings of a page into the menu of a web page. The web page is generated with Jekyll and it's default layout looks as follows:
<!DOCTYPE html>
<html>
{% include head.html %}
<body>
{% include header.html %}
<div id="BigFatContainer">
{{ content }}
{% include footer.html %}
</div>
</body>
</html>
It is in the header that the menu for navigating to the different pages is located. I've been able to add a table of contents to the {{ content }} with the help of the following Kramdown command:
* Point at which the TOC is attached
{:toc}
One could use some ugly JavaScript hack to move this table of contents from the {{ content }} and into header.html but that'd be a bad solution. It's not possible to place the {:toc} macro inside header.html since that's not parsed by Kramdown, and even if you make sure that it's parsed by Kramdown using for example this plugin it outputs the TOC of header.md instead of the TOC for the content.
#miroslav-nedyalkov was on the right track here. Following his suggestion of looking at the Bootstrap documentation, I found that it uses a Ruby Gem - jekyll-toc that allows you to place a TOC anywhere in a layout file. You enable it in the front matter. I'm now successfully using:
<nav aria-label="Table of Contents">
{{ content | toc_only }}
</nav>
<section itemprop="articleBody">
{{ content }}
</section>
I would suggest you to use the approach Bootstrap website (scroll down and observe the right navigation area) is using - make your TOC as part of the content area, but style it to be placed on the side like main navigation. The main reason I'm suggesting you this approach is that you may (and most probably will) have more than one page. In this case you will need to display different page navigation for every page and display some navigation between the pages.
For more information you may refer to this article - http://idratherbewriting.com/2015/01/20/implementing-scrollspy-with-jekyll-to-auto-build-a-table-of-contents/
Why moving the toc block ?
This is correct to say that this toc is part of the page content. Semantically speaking.
You problem here is not at the document structure level but at the presentational one.
In this case the use of CSS is recommended to solve your problem.
I've been on the hunt for a method of pre-compiling inline markdown with grunt. I chose markdown because, I'm dealing with lots of plain text with simple formatting, but I would not be completely opposed to JSON (or similar).
Here is an example: what I'm looking for:
<body>
<div id="content">
<div class="text">
## Markdown Headline
markdown Paragraph 1
</div>
<div class="text">
## Markdown Headline
Markdown Paragraph 2
</div>
</div>
</body>
Even better would be something like:
<body>
<div id="content">
<div class="text">
{include: /path/to/markdown_file_1.md:block_1}
</div>
<div class="text">
{include: /path/to/markdown_file_1.md:block_2}
</div>
</div>
</body>
I'm not looking to create templates from markdown, merely a way of including text, which is then rendered/compiled into html using "grunt build" (or in the case of yeoman, also for "grunt server").
Meaning the above example would compile to something such as...
<body>
<div id="content">
<div class="text">
<h1>Markdown Headline</h1></p>
Lorem ipsum <b>dolar</b> set amet.
</div>
<div class="text">
<h1>Markdown Headline</h1></p>
Integer <i>posuere erat a ante</i> venenatis dapibus posuere velit aliquet.
</div>
</div>
</body>
Each html page, will be different thus making templates not possible and since I am receiving copy (as markdown files), I thought it would be great if I could "include" markdown in the html and have grunt compile it for me.
I've looked across stackoverflow for a solution and found nothing (perhaps, I'm searching wrong)
I've also looked into the following:
github.com/evilstreak/markdown-js - close, but seems to work "on-the-fly" which for my purposes is unncessary.
github.com/chjj/marked - same as above
github.com/treasonx/grunt-markdown - appears to only compile markdown files into html files
assemble.io/docs/Markdown.html - I was really hopeful for assemble, but could not figure out how to implement it
github.com/wycats/handlebars.js - Handlebars are exactly how I would love to be able to include markdown, but how can I read handlebars within an HTML file and have it rendered (pre-compiled) with grunt.
Assemble is awesome for this.
Write markdown inline with HTML, or just specify any markdown you want in your Grunt config and Assemble will use it. Use the following helpers to convert inline or external markdown to HTML:
{{md}} helper
This helper will treat markdown files like includes, and convert the markdown to HTML:
{{md "path/to/file.md"}}
{{markdown}} block helper
This is a block helper that enables you to write markdown inline with HTML:
{{#markdown}}
# Foo
> This is markdown
{{/markdown}}
The beauty of this approach is that you can write both HTML and markdown together, OR just write markdown and it will just work.
Here is how I'm building my new blog:
blog: {
options: {
layout: 'templates/layouts/default.hbs'
},
files: {
'<%= site.dest %>/': ['content/*.md']
}
}
My layout, default.hbs, looks something like this:
<html lang="en">
<head>
{{> head }}
</head>
<body>
{{> nav-main }}
<div class="container">
{{#markdown}}
{{> body }}
{{/markdown}}
</div>
{{> footer }}
</body>
</html>
Use a combination of grunt-markdown (as per Simon's comment) to render the Markdown and grunt-import to inject it into your build. An example configuration (untested, so you might have to play around with this a little):
module.exports = function(grunt) {
grunt.initConfig({
markdown: {
build: {
files: [{
expand: true,
src: 'path/to/markdown/**/*.md',
dest: 'path/to/build/',
ext: '.html'
}]
}
},
import: {
build: {
src: 'path/to/build/**/*.html',
dest: 'path/to/build/'
}
}
});
grunt.registerTask('build', ['markdown', 'import']);
}
The import task takes a string such as #import "path/to/another/file"; in your source file and injects the contents of that file to the destination file.