Kramdown General Concepts
kramdown syntax
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.
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 %}
Links
- Languages Supported https://highlightjs.org/static/demo/
- Languages supported by Rouge: https://github.com/jneen/rouge/tree/master/lib/rouge/lexers
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
- Documentation http://kramdown.gettalong.org/syntax.html
- Quickref http://kramdown.gettalong.org/quickref.html
- Inserting Bootstrap 4 Responsive Images In KramdownAugust 7, 2016
- Kramdown General Concepts
Articles
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
·