How to Automatically Escape HTML Content Using Jekyll and Markdown

How can I automatically escape HTML content using Jekyll and Markdown?

If you used textile instead of markdown, there would be a way.

Liquid markup has textilize & escape filters; those two would allow you to do what you wanted, but on textile. You would have to save your files as text (file extension: txt), and then escape the html before textilizing:

---
layout: default
title: Snarky little Ewok
---

This file's extension is .txt

A little Ewok is sometimes referred too as <h3>. But pappa Ewok is called <h1> - if you know what's good for you.

Then on the default.html layout, instead of having:

{{ page.content }}

You would have this:

{{ page.content | xml_escape | textilize }}

Since there's no 'markdownify' filter on Jekyll yet, you can't do that with markdown. There's an issue (Issue 134) on Jekyll for adding a markdownify filter.

EDIT:

It's now possible to use markdown (since jekyll 0.10.1)

{{ page.content | xml_escape | markdownify }}

Escaping Rendering Liquid Template in Jekyll Markdown

Turns out my issue was further complicated by a template issue with Vue.js, which also uses the mustache syntax for templates. I was able to resolve this with the following:

{% raw %}{{ "{{ content "  }}}}{% endraw %}

It doesn't look great, but it works.

jekyll auto compile all markdown files

Processing or not, that is the question ?

File with a front matter --> jekyll processing

File without front matter = static file --> just copied

The minimal front matter is :

---
---

Markdown/Jekyll: Auto-surround bare URLs with angle brackets?

You may try the below regex:

(?!<)^(https?:\/\/(?:www\.)?[-a-zA-Z0-9@:%._\+~#=]{1,256}\.[a-zA-Z0-9()]{1,6}\b(?:[-a-zA-Z0-9()@:%_\+.~#?&\/\/=]*))(?!>)$

Explanation of the above regex:

(?!<) - Represents negative look-ahead not matching the string if it starts with a <.
^, $ - Represents start and end of line respectively.
(https?:\/\/(?:www\.)?[-a-zA-Z0-9@:%._\+~#=]{1,256}\.[a-zA-Z0-9()]{1,6}\b(?:[-a-zA-Z0-9()@:%_\+.~#?&\/\/=]*)) - This part matches all the possible valid urls efficiently.
(?!>) - Represents negative look-ahead not matching if the url ends in >.

You can find the demo of the above regex in here.

NOTE: I also prefer using perl command if it comes to implementation in bash. But if it is your necessary requirement to use sed then you can try the below command. However; please be noted that sed misses many amazing features of regex namely; look-arounds, non-captured groups, etc.

sed -E 's@^[^<]?(https?://(www\.)?[-a-zA-Z0-9@:%._\+~#=]{1,256}\.[a-zA-Z0-9()]{1,6}\b([-a-zA-Z0-9()@:%_\+.~#?&/=]*))[^>]?$@<\1>@gm'

You can find sample run of the perl and sed implementation in here.

Jekyll YAML issue in rendering

A couple of things:

You should be able to use either single ' or double quotes ", but not curly quotes “”. Providing you have no comma's in your string, you should also be fine without quotes.
If you define and use an excerpt_separator in your _config.yml, the post.excerpt will be automatically generated for you. Jekyll Docs - Posts
You don't need to pass HTML in to any of your front-matter. You can simply call it with the strip_html and markdownify filters to strip links/formatting and wrap it in a <p> tag. Jekyll Docs - Templates

{{ page.excerpt|strip_html|markdownify }}

edit: I may have misread, but to put quote marks inside one of these bits of front-matter, you can use a backslash to escape it:

---
title: "This is a quote \" it is rendered."
---

Jekyll, modify the way some html tags are rendered

I found the way and corrected the code, I need a properly configured custom renderer. Using RedcarpetExt as markdown variable in the _config.yaml will activate it.

# Create a custom renderer that extend Redcarpet to customize its behavior.
require 'jekyll'
require 'redcarpet'

class RedcarpetExtender < Redcarpet::Render::HTML
  # Extend the table to be compatible with the Bootstrap css.
  def table(header, body)
    "\n<table class='table-bordered table-hover'><thead>\n#{ header }</thead><tbody>\n#{ body }</tbody></table>\n"
  end
end

class Jekyll::Converters::Markdown::RedcarpetExt
  def initialize(config)
    @site_config = config
  end

  def extensions
    Hash[ *@site_config['redcarpet']['extensions'].map {|e| [e.to_sym, true]}.flatten ]
  end

  def markdown
    @markdown ||= Redcarpet::Markdown.new(RedcarpetExtender, extensions)
  end

  def convert(content)
    return super unless @site_config['markdown'] == 'RedcarpetExt'
    markdown.render(content)
  end
end

Table of contents using Jekyll and Kramdown

{: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>

Jekyll: produce custom HTML for external links (target and CSS class)

It seems writing a plugin is straight forward. This is what I have come up with:

module Jekyll
  class ExtLinkTag < Liquid::Tag
    @text = ''
    @link = ''

    def initialize(tag_name, markup, tokens)
      if markup =~ /(.+)(\s+(https?:\S+))/i
        @text = $1
        @link = $3
      end
      super
    end

    def render(context)
      output = super
      "<a class='external' target='_blank' href='"+@link+"'>"+@text+"</a>"
    end
  end
end

Liquid::Template.register_tag('extlink', Jekyll::ExtLinkTag)

Example usage:

Exhibition at {% extlink Forum Stadtpark http://forum.mur.at %}.

HTML output:

<p>Exhibition at <a class="external" target="_blank" href="http://forum.mur.at">Forum Stadtpark</a>.</p>