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.
Related
I'm learning Jekyll, and I have this basic file, which is prefaced by YAML frontmatter:
---
layout: 'post'
---
> Test Quote
I've successfully managed to link my CSS stylesheet to the top wrapper page.html file. But there's a problem in that when Jekyll turns this Markdown into HTML, it turns this quote into:
<blockquote>
<p>Test Quote</p>
</blockquote>
Yet I need it to generate into:
<blockquote>
<div class="quote-line-container">
<div class="quote-line"></div>
<div class="quote-mark">“</div>
<div class="quote-line"></div>
</div>
<div class="quote-container">
<p class="quote">Test Quote</p>
</div>
</blockquote>
I've tried searching every variation of the words "Jekyll change Markdown HTML output" I can and no relevant results appear for my case.
How could I do this, and change the Jekyll output? Or is there a better way to generate something like this, using CSS or something?
This is not possible to do. Jekyll uses Kramdown as its Markdown engine and the customization of the process is pretty limited (as one would expect). You can see all the options here.
For this reason, your alternatives are:
Making your own Markdown engine for Jekyll (which is clearly overkill).
Making some preprocessing script to call before Jekyll only to perform that substitution. If you have a lot to translate, it is your best alternative.
Writing your blockquotes directly as you want them generated. Jekyll will leave your HTML code intact during the Markdown translation, so the result will be the one you want.
I'm trying to create a Jekyll project on Github, styled with Material Design Components. MDC states that Elements are not natively styled, which means that most (if not all) elements will need to be styled with classes. What this means now is that
<div class="mdc-typography">
<div class="mdc-layout-grid max-width">
<div class="mdc-layout-grid__inner">
<div class="mdc-layout-grid__cell mdc-layout-grid__cell--span-8">
```js
// some js
```
</div>
</div>
</div>
</div>
doesn't actually render the code as expected. Rather it renders as plain text. I guess I'm a little new to this. But what is the proper way to nest fenced code blocks within div tags with classes?
The rule for markdown is that it must be indented at least 4 spaces. I am aware of this.
If you are writing this on your jekyll project use
{% highlight javascript %}
{% endhighlight %}
Jekyll Docs
Here is another stack question similar to yours: link
Alternatively, you can style it like it's code.
I know how to use to define the end of the excerpt, but I'd like to omit the first paragraph of the post as well.
How can this be done?
Thanks in advance all!
Just got into the same issue. I have a separate place for excerpt and below I want post without excerpt (because it was already displayed). What worked for me was:
<header>
{{ page.excerpt }}
</header>
<article>
{{ content | remove_first:page.excerpt }}
</article>
It has to be defined in the same layout you use for posts and posts only.
If I understand right you just want the first paragraph.
post.excerpt gets the first paragraph of your post. An alternative would be to create a variable in your markdown files and call it whenever you want.
e.g.
---
layout: post
title: Your title
post_description: A plugin to extend Swiper for easier JW Player integration.
---
and call {{ post.post_description }} in your lists.
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.
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.