Concepts

Markdown superset converter

Syntax

Blockquotes

Two alternatives for fully semantically correct blockquotes:

  • Adding the cite attribute in blockquote tag:
> The rule of thumb is, don't introduce a new attribute outside of the __init__ method, otherwise you've given the caller an object that isn't fully initialized.
{: cite="https://jeffknupp.com/blog/2014/06/18/improve-your-python-python-classes-and-object-oriented-programming/"}

Generates the following HTML:

<blockquote cite="https://jeffknupp.com/blog/2014/06/18/improve-your-python-python-classes-and-object-oriented-programming/">
  <p>The rule of thumb is, don’t introduce a new attribute outside of the <strong>init</strong> method, otherwise you’ve given the caller an object that isn’t fully initialized.
</blockquote>
  • Adding a cite element inside the blockquote
> The secret to creativity is knowing how to hide your sources. 
> -- <cite>[Albert Einstein][1]</cite>

[1]:http://www.quotedb.com/quotes/2112

Generates in HTML:

<blockquote>
  <p>The secret to creativity is knowing how to hide your sources. 
  – <cite><a href="http://www.quotedb.com/quotes/2112">Albert Einstein</a></cite>
  </p>
</blockquote>

Generate Bootstrap 4 Blockquotes

In BS4 blockquotes need to have the class="blockquote" in the blockquote element and optionally a class=blockquote-footer in the <footer> element at bottom:

> Django handles three distinct parts of the work involved in forms.
> <footer class="blockquote-footer">Djangoproject.com tutorial</footer>
{: class="blockquote" cite="https://docs.djangoproject.com/en/1.9/topics/forms/"}

Generates:

Django handles three distinct parts of the work involved in forms.

Djangoproject.com tutorial

Code syntax highlighting

kramdown can use rouge or Coderay for syntax highlighting.

The language of the source code can be specified appending the name of the language after the opening line. e.g. for HTML:

  • With tildes
~~~ html
<p> this is my paragraph</p>
~~~
  • Using IAL
~~~
def myfunction?
  1618
end
~~~
{: .language-ruby}

In Jekyll also works:

  • Using backticks:
require 'redcarpet'
markdown = Redcarpet.new("Hello World!")
puts markdown.to_html
  • Or with curly braces:
def foo
  puts 'foo'
end

Table of content generation

Kramdown can generate an automatic Table of Contents for all the headers that have an id.

As by default it generates automatic ids for all the header, there is only needed to add a list and name using IAL as the placeholder of the generated TOC.

* TOC
{:toc}

http://kramdown.gettalong.org/converter/html.html#toc

References

Uruguay
Marcelo Canina
I'm Marcelo Canina, a developer from Uruguay. I build websites and web-based applications from the ground up and share what I learn here.