From e1a24279a78583e3b4c71620100e4ce89a540523 Mon Sep 17 00:00:00 2001 From: Brendan Abbott Date: Sat, 3 Dec 2016 14:54:08 +1000 Subject: [PATCH 1/2] Update specimen, add inlinehilite content --- docs/extensions/codehilite.md | 2 +- docs/extensions/pymdown/inlinehilite.md | 24 +++++ docs/extensions/pymdown/overview.md | 4 +- docs/specimen.md | 126 ++++++++++++++++++------ mkdocs.yml | 1 + 5 files changed, 126 insertions(+), 31 deletions(-) diff --git a/docs/extensions/codehilite.md b/docs/extensions/codehilite.md index d90d8ee5e..7f58b4c10 100644 --- a/docs/extensions/codehilite.md +++ b/docs/extensions/codehilite.md @@ -527,7 +527,7 @@ func main() {

Hello world! This is HTML5 Boilerplate.

- + ``` ### Java diff --git a/docs/extensions/pymdown/inlinehilite.md b/docs/extensions/pymdown/inlinehilite.md index e69de29bb..92af8d942 100644 --- a/docs/extensions/pymdown/inlinehilite.md +++ b/docs/extensions/pymdown/inlinehilite.md @@ -0,0 +1,24 @@ +# Inlinehilite + +The [Inlinehilite][] extension included in the [PyMdown Extensions][] package adds +support for inline code highlighting. It's useful for short snippets included with +body copy. + +## Installation + +Make sure that the PyMdown Extensions package [is installed][] and add the +following lines to your `mkdocs.yml`: + +``` yaml +markdown_extensions: + - pymdownx.inlinehilite +``` + +## Usage + +Syntax is similar to usual code highlighting, with the langauge shebang followed by one space. If you need to escape the highlight (like we're about to), add a space prior to the shebang. + +For example, `#!js var test = 0;`, which was achieved using ` #!js var test = 0;`. Alternatively, you can use the triple colon, ` :::js var test = 0;` to produce the same result, `:::js var test = 0;`. + +[Inlinehilite]: https://facelessuser.github.io/pymdown-extensions/extensions/inlinehilite/ +[PyMdown Extensions]: https://facelessuser.github.io/pymdown-extensions diff --git a/docs/extensions/pymdown/overview.md b/docs/extensions/pymdown/overview.md index cb48f7613..ea17b6202 100644 --- a/docs/extensions/pymdown/overview.md +++ b/docs/extensions/pymdown/overview.md @@ -31,7 +31,7 @@ pip install pymdown-extensions ### New features - Arithmatex -- Inlinehilite -- Tasklist +- [Inlinehilite](inlinehilite.md) +- [Tasklist](tasklist.md) [PyMdown Extensions]: http://facelessuser.github.io/pymdown-extensions/ diff --git a/docs/specimen.md b/docs/specimen.md index 3401b81a3..2d8bcc35a 100644 --- a/docs/specimen.md +++ b/docs/specimen.md @@ -64,36 +64,52 @@ the `` tag directly inside Markdown. ### Ordered lists +This is an ordered list of sentences for the sake of checking the styling is 👌! + +1. The first sentence, free from markup. +2. The second sentence includes _italic_ text, and a [link](#) that should hopefully help it trigger a second line overflow to make sure spacing is a-ok. +3. The third sentence highlights some enjoyable fruits: + 1. Mangoes, **yum**! + 2. Blueberries + 3. Strawberries + 4. Apples (in particular) + 1. Sundowner + + My favourite 💕 + + 2. Granny Smith +4. An this is just a footer sentence just to make sure. + ### Unordered lists -## Checklists +Let's do that again, this time without the numbering. -This is inline hilighted text `#!js var test = 0;` that is just awesome LOL +- Free from markup, just like a bird. +- Let's try some [link](#) with some inline code `var home = '127.0.0.1'`, and now some extra __fluff__ to ensure we're using more than a single line. +- These are some varietes of beer. + - Lager -* [ ] foo -* [x] bar -* [ ] baz - * [ ] foo - * [x] bar - * [ ] baz + Lager is a type of beer that is conditioned at low temperatures, normally at the brewery. It may be pale, golden, amber, or dark. - + Kölsch is a beer brewed in Cologne, Germany. It is a clear, top-fermented beer with a bright, straw-yellow hue similar to other beers brewed from mainly Pilsener malt. + + - Siason + + Saison is a pale ale that is generally around 7% ABV, highly carbonated, fruity, spicy, and often bottle conditioned + + - IPA + +- An this is just a footer sentence just to make sure. + +We can also use the alternative Markdown styling for lists (`*`, `+` or `-`), even mixing them: + +* As shown by this item, which is a `*`. ++ This item uses `+`. + * And it also includes an nested item for good measure. +- The final item uses `-`. +- And for good measure, this also uses `-`. Another default list: @@ -107,6 +123,19 @@ Another default list: } ``` +## Checklists + +Checklists are supported by the [PyMdown Extension][], [Tasklist][]: + +* [ ] foo +* [x] bar +* [ ] baz + * [ ] foo + * [x] bar + * [ ] baz + +### Critic + Here is some {--*incorrect*--} Markdown. I am adding this {++here.++}. Here is some more {--text that I am removing--}text. And here is even more {++text that I am ++}adding.{~~ @@ -148,6 +177,13 @@ General block handling. ## Code +### Inline + +Code can also be written `inline`, however syntax +highlighting will only work on code listings unless you are using [inlinehilite][], which allows magic like `#!js var test = 0;`! + +There has also been some recent conjecture about how articles will style [links that include `inline code` samples](https://www.impressivewebs.com/fixing-styles-on-code-tags-nested-inside-links/), so let's make sure we get that right too. + ### Listing Pre-formatted code blocks can host code examples and use the pygments extension @@ -205,10 +241,7 @@ pb_varint_scan(const uint8_t data[], size_t left) { } ``` -### Inline - -Code can also be written within `fenced inline code blocks`, however syntax -highlighting will only work on code listings. +For more examples of coding highlighting, see the [codehilite][] extensions page. ## Tables @@ -225,3 +258,40 @@ highlighting will only work on code listings. | Packages | yes | yes | yes | yes | yes | | Packed option | yes | yes | yes | yes | yes | | Deprecations | yes | partial | - | - | - | + +Tables might also include alignment indiciators: + +| Left Align | Center Align | Right Align | +| :----------- | :------------: | ------------: | +| Hi | there | friend | +| How | are | you? | + +And if you're using something like [Pandoc](http://pandoc.org/), you might get tables with `colgroup`, which is fun? + + + + + + + + + + + + + + + + + + + + + + +
CompanyDescription
GoogleA search engine (among other things).
BingAnother search engine, from Microsoft.
+ +[codehilite]: extensions/codehilite.md +[inlinehilite]: extensions/pymdown/inlinehilite.md +[PyMdown Extension]: extensions/pymdown/overview.md +[Tasklist]: extensions/pymdown/tasklist.md diff --git a/mkdocs.yml b/mkdocs.yml index 673ca026c..73e1a0100 100755 --- a/mkdocs.yml +++ b/mkdocs.yml @@ -76,6 +76,7 @@ pages: - Permalinks: extensions/permalinks.md - PyMdown: - Overview: extensions/pymdown/overview.md + - Inline Hilite: extensions/pymdown/inlinehilite.md - Tasklist: extensions/pymdown/tasklist.md - Specimen: specimen.md - Customization: customization.md From 9eae3956b77c420ce9a3b8d39fbd5acf7daef18d Mon Sep 17 00:00:00 2001 From: Brendan Abbott Date: Sat, 3 Dec 2016 15:17:42 +1000 Subject: [PATCH 2/2] Correct table styles, fix inline code link style --- src/assets/stylesheets/base/_typeset.scss | 21 +++++++++++++++++++++ 1 file changed, 21 insertions(+) diff --git a/src/assets/stylesheets/base/_typeset.scss b/src/assets/stylesheets/base/_typeset.scss index 87107398f..9d72c2613 100644 --- a/src/assets/stylesheets/base/_typeset.scss +++ b/src/assets/stylesheets/base/_typeset.scss @@ -206,6 +206,16 @@ kbd { box-shadow: none; } + // Reset code if it's inside a link + a > code { + margin: inherit; + padding: inherit; + border-radius: none; + background: inherit; + color: inherit; + box-shadow: none; + } + // Unformatted code blocks pre { margin: 1.0em 0; @@ -347,6 +357,7 @@ kbd { // Data tables table { + width: 90%; margin: 1.5em 0; font-size: ms(-1); overflow: hidden; @@ -377,6 +388,16 @@ kbd { vertical-align: top; } + th[align="right"], + td[align="right"] { + text-align: right; + } + + th[align="center"], + td[align="center"] { + text-align: center; + } + tr:first-child td { border-top: 0; }