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.
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.
Is there a way to piece meal your HTML too with Webpack so you have HTML chunks instead of large HTML files?
Example:
<html>
<body>
<div>Here is the main page </div>
<script>
// inject a chunk of HTML here
require.include('./header.html');
</script>
</body>
</html>
I saw the HTML loader but I don't think I can use it for this purpose.
Maybe you need this html-loader
Edited:
You can use interpolate flag to enable interpolation syntax for ES6 template strings, like so:
require("html?interpolate!./file.html");
<img src="${require(`./images/gallery.png`)}" />
<div>${require('./partials/gallery.html')}</div>
I am using Jade just to include other sections in my HTML files using include. This works fine if I write Jade syntax instead of HTML syntax. But in my case, I need to write HTML syntax only. I am trying to use jade just for include only.
From this link, I found that we can write HTML by including . or | in the code. So, to test this out, I wrote the code like this:
File index.jade
div.main.
<div class="wrapper">
include header
</div>
As you can see in above code, I added . as suffix to the Jade syntax line, i.e., div.main., which lets me write HTML from next line.
File header.jade
<header></header>
But this isn't working. The rendered HTML looks like this:
File index.html
<div class="main">
<div class="wrapper">
include header
</div>
</div>
If I don't use . and follow the Jade syntax, everything works fine. But in my case, I really need to write in HTML, but not in Jade.
Is there a workaround to make the include work inside the HTML syntax?
Well, it is possible to do what you want, but I am not sure if Jade is the best option.
Note: In Jade, every line which starts with < is considered plain text, so there is no need to use dot or | to write html tags.
Here is a working example of what you want:
a.jade
div.main
<div class="wrapper">
include b.jade
</div>
b.jade
<div class="b">I am content from b.jade</div>
and after compilation of a.jade we get:
a.html
<div class="main">
<div class="wrapper">
<div class="b">I am content from b.jade</div>
</div>
</div>
This code was tested and it works 100% with the latest version of Jade, but It works only when you don't increase indentation level. For example, the following code will not work:
div.main
<div class="wrapper">
include b.jade
</div>
On compilation it will throw: unexpected token "indent", and the error itself:
div.main
<div class="wrapper">
include b.jade
^^ extra indent "tab"
</div>
The same is true for nested plain HTML too, so the following:
div.main
<div class="wrapper">
<div class="foo">
include b.jade
</div>
</div>
will also throw this error: unexpected token "indent", and the errors:
div.main
<div class="wrapper">
<div class="foo">
^^
include b.jade
^^^^
</div>
^^
</div>
You can write code like this:
div.main
| <div class="wrapper">
| <div class="foo">
| <div class="bar">
include b.jade
| </div>
| </div>
| </div>
and assuming that we already have that b.jade, it will be compiled into:
<div class="main">
<div class="wrapper">
<div class="foo">
<div class="bar"><div class="b">I am content from b.jade</div></div>
</div>
</div>
</div>
But note where I placed that include b.jade, exactly one tab has been added in comparison with last Jade command div.main (so included file will be nested into .main div), and you should follow that indent rule if you want your code to work.
Alternative solution
As I wrote at the beginning, Jade is not the best option in your case. I would use another server side language to do what you want.
Here is a basic algorithm:
Write your HTML files in plain HTML (.html) and as an include use a custom tag like <include b.html>
Create a master file using a server side language which will load and process your HTML files and will replace your custom tags with actual content from these files
Save output to a new file and use it.
Here is an example written in PHP:
master.php
<?php
$main_file = "a.html";
$content = file_get_contents($main_file);
$content = preg_replace_callback(
'!<include\s+([^>]+)>!',
function ($m) {
return file_get_contents($m[1]);
}, $content
);
file_put_contents("bundle.{$main_file}", $content);
Now HTML files:
a.html
<div class="main">
<div class="wrapper">
<include b.html>
</div>
</div>
b.html
<div class="b">foobar</div>
Now after we will execute master.php we will get bundle.a.html with the following content:
bundle.a.html
<div class="main">
<div class="wrapper">
<div class="b">foobar</div>
</div>
</div>
I get stuck by the same problem. Jade requires me to use no indent in the plain HTML. But if you change the header.jade to header.html, it will work.
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.