Ruby kramdown: Difference between revisions

From wikinotes
No edit summary
 
(8 intermediate revisions by the same user not shown)
Line 11: Line 11:
|}
|}
</blockquote><!-- Documentation -->
</blockquote><!-- Documentation -->
= Editors =
<blockquote>
{| class="wikitable"
|-
| online kramdown editor || http://kramdown.electricbook.works/
|-
|}
</blockquote><!-- Editors -->
= Syntax =
<blockquote>
In addition to the base [[markdown syntax]]
== Headers ==
<blockquote>
Set the id of a header
<syntaxhighlight lang="md">
# Header 1 (#my-first-header)
</syntaxhighlight>
</blockquote><!-- Header IDs -->
== Links ==
<blockquote>
Footnotes
<syntaxhighlight lang="md">
This species of foo is noted for it's propensity to...[^wikipedia].
[^wikipedia]: See wikipedia
</syntaxhighlight>
</blockquote><!-- Links -->
= End of Block =
<blockquote>
Use <code>^</code> to indicate the end of block elements.<br>
Useful to separate lists, code-blocks, etc.
<syntaxhighlight lang="md">
    def foo(bar):
        print("baz")
^
    def snap(crackle):
        print("pop")
</syntaxhighlight>
</blockquote><!-- End of Block -->
== Code ==
<blockquote>
Fenced code-blocks
<syntaxhighlight lang="md">
~~~
def foo(bar):
    print("baz")
~~~
</syntaxhighlight>
Fenced code-block syntax-highlighting
<syntaxhighlight lang="md">
~~~ python
def foo(bar):
    print("baz")
~~~
</syntaxhighlight>
</blockquote><!-- Code Blocks -->
== Tables ==
<blockquote>
Tables without headers
<syntaxhighlight lang="md">
| red  | #FF0000 |
| green | #00FF00 |
| blue  | #0000FF |
</syntaxhighlight>
Tables with headers
<syntaxhighlight lang="md">
| faction  | username |
| -------- | -------- |
| imperial | vaderd  |
| rebel    | lukes    |
</syntaxhighlight>
Cell Alignment is indicated with <code>:</code> characters in the header marker.
<syntaxhighlight lang="md">
| right aligned  |  centered  | left aligned  | default aligned |
| -------------: | :--------: | :------------ | --------------- |
| foo            |    bar    | baz          | bif            |
</syntaxhighlight>
It can also be abbreviated:
<syntaxhighlight lang="md">
| right aligned | centered | left aligned | default aligned |
| -: | :-: | :- | - |
| foo | bar | baz | bif |
</syntaxhighlight>
Kramdown also supports multiple table bodies, and table footer rows.
</syntaxhighlight>
</blockquote><!-- Tables -->
== Math ==
<blockquote>
Kramdown can also render [[latex]] code blocks.
<syntaxhighlight lang="md">
$$
x^2 \times 5
$$
</syntaxhighlight>
</blockquote><!-- Math -->
== HTML attributes ==
<blockquote>
You can set attributes on [[html elements]].
* id/class use a syntax like [[css selectors]]. (ex: <code>{:.set-my-id}</code>)
* other key/value attributes can be assigned with an equal sign (ex: <code>{:title="my title"}</code>
<syntaxhighlight lang="md">
# header with id and title
{: .header-with-id-and-title}
{:title="Header with ID"}
{:.ruby}
    def foo(bar = "baz")
      p bar
    end
</syntaxhighlight>
</blockquote><!-- HTML attributes -->
</blockquote><!-- Syntax -->

Latest revision as of 14:37, 19 September 2021

A markdown parser written in ruby.

Documentation

official docs https://kramdown.gettalong.org/syntax.html
github https://github.com/gettalong/kramdown

Editors

online kramdown editor http://kramdown.electricbook.works/

Syntax

In addition to the base markdown syntax

Headers

Set the id of a header

# Header 1 (#my-first-header)

Links

Footnotes

This species of foo is noted for it's propensity to...[^wikipedia].

[^wikipedia]: See wikipedia

End of Block

Use ^ to indicate the end of block elements.
Useful to separate lists, code-blocks, etc.

    def foo(bar):
        print("baz")
^
    def snap(crackle):
        print("pop")

Code

Fenced code-blocks

~~~
def foo(bar):
    print("baz")
~~~

Fenced code-block syntax-highlighting

~~~ python
def foo(bar):
    print("baz")
~~~

Tables

Tables without headers

| red   | #FF0000 |
| green | #00FF00 |
| blue  | #0000FF |

Tables with headers

| faction  | username |
| -------- | -------- |
| imperial | vaderd   |
| rebel    | lukes    |

Cell Alignment is indicated with : characters in the header marker.

| right aligned  |  centered  | left aligned  | default aligned |
| -------------: | :--------: | :------------ | --------------- |
| foo            |    bar     | baz           | bif             |

It can also be abbreviated:

| right aligned | centered | left aligned | default aligned |
| -: | :-: | :- | - |
| foo | bar | baz | bif |

Kramdown also supports multiple table bodies, and table footer rows. </syntaxhighlight>

Math

Kramdown can also render latex code blocks.

$$
x^2 \times 5
$$

HTML attributes

You can set attributes on html elements.

  • id/class use a syntax like css selectors. (ex: {:.set-my-id})
  • other key/value attributes can be assigned with an equal sign (ex: {:title="my title"}
# header with id and title
{: .header-with-id-and-title}
{:title="Header with ID"}


{:.ruby}
    def foo(bar = "baz")
      p bar
    end