+++ /dev/null
-module Jekyll
- class MarkdownBlock < Liquid::Block
- alias_method :render_block, :render
-
- def initialize(tag_name, markup, tokens)
- super
- end
-
- # Uses the default Jekyll markdown parser to
- # parse the contents of this block
- #
- def render(context)
- site = context.registers[:site]
- converter = site.find_converter_instance(::Jekyll::Converters::Markdown)
- converter.convert(render_block(context))
- end
- end
-end
-
-Liquid::Template.register_tag('markdown', Jekyll::MarkdownBlock)
<tbody>
<tr>
<td>
- {% markdown %}`<h1></h1>`{% endmarkdown %}
+ {{ "`<h1></h1>`" | markdownify }}
</td>
<td><span class="h1">h1. Bootstrap heading</span></td>
</tr>
<tr>
<td>
- {% markdown %}`<h2></h2>`{% endmarkdown %}
+ {{ "`<h2></h2>`" | markdownify }}
</td>
<td><span class="h2">h2. Bootstrap heading</span></td>
</tr>
<tr>
<td>
- {% markdown %}`<h3></h3>`{% endmarkdown %}
+ {{ "`<h3></h3>`" | markdownify }}
</td>
<td><span class="h3">h3. Bootstrap heading</span></td>
</tr>
<tr>
<td>
- {% markdown %}`<h4></h4>`{% endmarkdown %}
+ {{ "`<h4></h4>`" | markdownify }}
</td>
<td><span class="h4">h4. Bootstrap heading</span></td>
</tr>
<tr>
<td>
- {% markdown %}`<h5></h5>`{% endmarkdown %}
+ {{ "`<h5></h5>`" | markdownify }}
</td>
<td><span class="h5">h5. Bootstrap heading</span></td>
</tr>
<tr>
<td>
- {% markdown %}`<h6></h6>`{% endmarkdown %}
+ {{ "`<h6></h6>`" | markdownify }}
</td>
<td><span class="h6">h6. Bootstrap heading</span></td>
</tr>
All lists—`<ul>`, `<ol>`, and `<dl>`—have their `margin-top` removed and a `margin-bottom: 1rem`. Nested lists have no `margin-bottom`.
<div class="bd-example">
-{% markdown %}
+{% capture markdown %}
* Lorem ipsum dolor sit amet
* Consectetur adipiscing elit
* Integer molestie lorem at massa
6. Faucibus porta lacus fringilla vel
7. Aenean sit amet erat nunc
8. Eget porttitor lorem
-{% endmarkdown %}
+{% endcapture %}
+{{ markdown | markdownify }}
</div>
For simpler styling, clear hierarchy, and better spacing, description lists have updated `margin`s. `<dd>`s reset `margin-left` to `0` and add `margin-bottom: .5rem`. `<dt>`s are **bolded**.
<div class="bd-example">
-{% markdown %}
-<dl>
- <dt>Description lists</dt>
- <dd>A description list is perfect for defining terms.</dd>
- <dt>Euismod</dt>
- <dd>Vestibulum id ligula porta felis euismod semper eget lacinia odio sem.</dd>
- <dd>Donec id elit non mi porta gravida at eget metus.</dd>
- <dt>Malesuada porta</dt>
- <dd>Etiam porta sem malesuada magna mollis euismod.</dd>
-</dl>
-{% endmarkdown %}
+ <dl>
+ <dt>Description lists</dt>
+ <dd>A description list is perfect for defining terms.</dd>
+ <dt>Euismod</dt>
+ <dd>Vestibulum id ligula porta felis euismod semper eget lacinia odio sem.</dd>
+ <dd>Donec id elit non mi porta gravida at eget metus.</dd>
+ <dt>Malesuada porta</dt>
+ <dd>Etiam porta sem malesuada magna mollis euismod.</dd>
+ </dl>
</div>
## Preformatted text
The `<pre>` element is reset to remove its `margin-top` and use `rem` units for its `margin-bottom`.
<div class="bd-example">
-{% markdown %}
<pre>
.example-element {
margin-bottom: 1rem;
}
</pre>
-{% endmarkdown %}
</div>
## Tables
`[hidden]` is not compatible with jQuery's `$(...).hide()` and `$(...).show()` methods. Therefore, we don't currently especially endorse `[hidden]` over other techniques for managing the `display` of elements.
{% endcallout %}
-To merely toggle the visibility of an element, meaning its `display` is not modified and the element can still affect the flow of the document, use [the `.invisible` class]({{ site.baseurl }}/docs/{{ site.docs_version }}/utilities/visibility/) instead.
\ No newline at end of file
+To merely toggle the visibility of an element, meaning its `display` is not modified and the element can still affect the flow of the document, use [the `.invisible` class]({{ site.baseurl }}/docs/{{ site.docs_version }}/utilities/visibility/) instead.
<tbody>
<tr>
<td>
- {% markdown %}`<h1></h1>`{% endmarkdown %}
+ {{ "`<h1></h1>`" | markdownify }}
</td>
<td><span class="h1">h1. Bootstrap heading</span></td>
</tr>
<tr>
<td>
- {% markdown %}`<h2></h2>`{% endmarkdown %}
+ {{ "`<h2></h2>`" | markdownify }}
</td>
<td><span class="h2">h2. Bootstrap heading</span></td>
</tr>
<tr>
<td>
- {% markdown %}`<h3></h3>`{% endmarkdown %}
+ {{ "`<h3></h3>`" | markdownify }}
</td>
<td><span class="h3">h3. Bootstrap heading</span></td>
</tr>
<tr>
<td>
- {% markdown %}`<h4></h4>`{% endmarkdown %}
+ {{ "`<h4></h4>`" | markdownify }}
</td>
<td><span class="h4">h4. Bootstrap heading</span></td>
</tr>
<tr>
<td>
- {% markdown %}`<h5></h5>`{% endmarkdown %}
+ {{ "`<h5></h5>`" | markdownify }}
</td>
<td><span class="h5">h5. Bootstrap heading</span></td>
</tr>
<tr>
<td>
- {% markdown %}`<h6></h6>`{% endmarkdown %}
+ {{ "`<h6></h6>`" | markdownify }}
</td>
<td><span class="h6">h6. Bootstrap heading</span></td>
</tr>
- `bugify.rb` is used to efficiently list out the entries on our [browser bugs]({{ site.baseurl }}/docs/{{ site.docs_version }}/browser-bugs/) page.
- `example.rb` is a custom fork of the default `highlight.rb` plugin, allowing for easier example-code handling.
- `callout.rb` is a similar custom fork of that, but designed for our special docs callouts.
- - `markdown-block.rb` is used to to render Markdown snippets within HTML elements like tables.
- [jekyll-toc](https://github.com/toshimaru/jekyll-toc) is used to generate our table of contents.
- All docs content has been rewritten in Markdown (instead of HTML) for easier editing.
- Pages have been reorganized for simpler content and a more approachable hierarchy.