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
Related
I'm writing Markdown content in Nuxt 3 & Nuxt Content 2.1 and I am facing a problem as I cannot write h2-h6 headers without it rendering them as links.
h1 works fine with one octothorpe symbol but as soon as I add 1 or more of them to render smaller headers, the application automatically transforms them to URLs.
Content is rendered with the default [...slug].vue and <ContentDoc /> configuration as seen in the documentation.
What's written in Markdown:
# header 1
## header 2
... and what's actually being rendered in HTML:
<h1 id="header-1">
<!--[-->
header 1
<!--]-->
</h1>
<h2 id="header-2">
<a href="#header-2">
<!--[-->
header 2
<!--]-->
</a>
</h2>
Is there any way to solve this?
EDIT:
Nuxt is also transforming simple HTML <h2> tags to links, but now with an undefined href:
<h2>header 2</h2>
to
<h2>
<a href="#undefined">
header 2
</a>
</h2>
Checkout the Nuxt Content doc here:
In Nuxt Content, Prose represents the HTML tags output from the Markdown syntax, for example title levels, links... A Vue component corresponds to each tag, allowing you to override them if needed.
By default, h2 becomes <a> tag in <h2> tag, it is defined in this file. These files are listed in components/prose section.
You may overwrite it by:
create components/content directory
create ProseH2.vue in it
copy the code from the origin file, in the template section, remove the <a> tag and the v-else, or whatever modification you want to do with it:
<template>
<h2 :id="id">
<slot />
</h2>
</template>
Restart server, it should changes.
You can also change this behaviour in your nuxt.config file
content: {
markdown: {
anchorLinks: false,
}
},
https://content.nuxtjs.org/api/configuration/#anchorlinks
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 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.
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'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.