Kramdown General Concepts

kramdown syntax

Published:
Last modified:

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:
```ruby
require 'redcarpet'
markdown = Redcarpet.new("Hello World!")
puts markdown.to_html
```
  • Or with curly braces:
{% highlight ruby %}
def foo
  puts 'foo'
end
{% endhighlight %}

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}

*[TOC]: Table Of Contents *[IAL]: Inline Attribute List

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.
comments powered by Disqus


Except as otherwise noted, the content of this page is licensed under CC BY-NC-ND 4.0 . Terms and Policy.

Powered by SimpleIT Hugo Theme

·