Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

use jekyll markdown converter #25319

Merged
merged 9 commits into from
Jan 19, 2018
Merged
Show file tree
Hide file tree
Changes from 2 commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
20 changes: 0 additions & 20 deletions _plugins/markdown-block.rb

This file was deleted.

45 changes: 20 additions & 25 deletions docs/4.0/content/reboot.md
Original file line number Diff line number Diff line change
Expand Up @@ -63,37 +63,37 @@ All heading elements—e.g., `<h1>`—and `<p>` are reset to have their `margin-
<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 }}
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I think you are missing pullticks in this file

</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>
Expand All @@ -105,7 +105,7 @@ All heading elements—e.g., `<h1>`—and `<p>` are reset to have their `margin-
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
Expand All @@ -127,38 +127,33 @@ All lists—`<ul>`, `<ol>`, and `<dl>`—have their `margin-top` removed and a `
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>
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Hmm, this was moot indeed.

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I've remove the {% markdown %} wrapper because there is no markdown to render here.

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Yeah, I know :) That is why I said it was moot because there wasn't any markdown there in the first place.

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

My bad y'all 😅

<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>
{% highlight css %}
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Need to confirm the output doesn't change due to any of our custom docs CSS.

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Before After
screen shot 2018-01-16 at 18 04 04 screen shot 2018-01-16 at 18 04 17

Copy link
Member

@XhmikosR XhmikosR Jan 16, 2018

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@mdo: did you mean this to be just plain pre without highlighting?

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Yes, it should be without highlighting since it's only showing the <pre> element.

.example-element {
margin-bottom: 1rem;
}
</pre>
{% endmarkdown %}
</div>
{% endhighlight %}

## Tables

Expand Down
12 changes: 6 additions & 6 deletions docs/4.0/content/typography.md
Original file line number Diff line number Diff line change
Expand Up @@ -32,37 +32,37 @@ All HTML headings, `<h1>` through `<h6>`, are available.
<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>
Expand Down
5 changes: 3 additions & 2 deletions docs/4.0/getting-started/introduction.md
Original file line number Diff line number Diff line change
Expand Up @@ -39,7 +39,7 @@ Curious which components explicitly require jQuery, our JS, and Popper.js? Click

<details>
<summary class="text-primary mb-3">Show components requiring JavaScript</summary>
{% markdown %}
{% capture markdown %}
- Alerts for dismissing
- Buttons for toggling states and checkbox/radio functionality
- Carousel for all slide behaviors, controls, and indicators
Expand All @@ -49,7 +49,8 @@ Curious which components explicitly require jQuery, our JS, and Popper.js? Click
- Navbar for extending our Collapse plugin to implement responsive behavior
- Tooltips and popovers for displaying and positioning (also requires [Popper.js](https://popper.js.org/))
- Scrollspy for scroll behavior and navigation updates
{% endmarkdown %}
{% endcapture %}
{{ markdown | markdownify }}
</details>

## Starter template
Expand Down
1 change: 0 additions & 1 deletion docs/4.0/migration.md
Original file line number Diff line number Diff line change
Expand Up @@ -302,7 +302,6 @@ Our documentation received an upgrade across the board as well. Here's the low d
- `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.
Expand Down