mirror of
https://github.com/squidfunk/mkdocs-material.git
synced 2024-06-14 11:52:32 +03:00
Added support for pymdownx.tabbed via pymdown-extensions 7.0b1 (#1459)
* Add support pymdownx.tabbed via pymdown-extensions 7.0b1 * Rebuild theme * Use :only-child
This commit is contained in:
parent
c035df94fd
commit
a348663566
@ -136,83 +136,91 @@ Result:
|
||||
|
||||
### Grouping code blocks
|
||||
|
||||
The [SuperFences][5] extension which is part of the [PyMdown Extensions][6]
|
||||
package adds support for grouping code blocks with tabs. This is especially
|
||||
The [Tabbed][5] extension which is part of the [PyMdown Extensions][6]
|
||||
package adds support for grouping Markdown blocks with tabs. This is especially
|
||||
useful for documenting projects with multiple language bindings.
|
||||
|
||||
Example:
|
||||
|
||||
````
|
||||
``` bash tab="Bash"
|
||||
#!/bin/bash
|
||||
=== "Bash"
|
||||
``` bash
|
||||
#!/bin/bash
|
||||
|
||||
echo "Hello world!"
|
||||
```
|
||||
echo "Hello world!"
|
||||
```
|
||||
|
||||
``` c tab="C"
|
||||
#include <stdio.h>
|
||||
=== "C"
|
||||
``` c
|
||||
#include <stdio.h>
|
||||
|
||||
int main(void) {
|
||||
printf("Hello world!\n");
|
||||
}
|
||||
```
|
||||
int main(void) {
|
||||
printf("Hello world!\n");
|
||||
}
|
||||
```
|
||||
|
||||
``` c++ tab="C++"
|
||||
#include <iostream>
|
||||
=== "C++"
|
||||
``` c++
|
||||
#include <iostream>
|
||||
|
||||
int main() {
|
||||
std::cout << "Hello world!" << std::endl;
|
||||
return 0;
|
||||
}
|
||||
```
|
||||
int main() {
|
||||
std::cout << "Hello world!" << std::endl;
|
||||
return 0;
|
||||
}
|
||||
```
|
||||
|
||||
``` c# tab="C#"
|
||||
using System;
|
||||
=== "C#"
|
||||
``` c#
|
||||
using System;
|
||||
|
||||
class Program {
|
||||
static void Main(string[] args) {
|
||||
Console.WriteLine("Hello world!");
|
||||
}
|
||||
}
|
||||
```
|
||||
class Program {
|
||||
static void Main(string[] args) {
|
||||
Console.WriteLine("Hello world!");
|
||||
}
|
||||
}
|
||||
```
|
||||
````
|
||||
|
||||
Result:
|
||||
|
||||
``` bash tab="Bash"
|
||||
#!/bin/bash
|
||||
=== "Bash"
|
||||
``` bash
|
||||
#!/bin/bash
|
||||
|
||||
echo "Hello world!"
|
||||
```
|
||||
echo "Hello world!"
|
||||
```
|
||||
|
||||
``` c tab="C"
|
||||
#include <stdio.h>
|
||||
=== "C"
|
||||
``` c
|
||||
#include <stdio.h>
|
||||
|
||||
int main(void) {
|
||||
printf("Hello world!\n");
|
||||
}
|
||||
```
|
||||
int main(void) {
|
||||
printf("Hello world!\n");
|
||||
}
|
||||
```
|
||||
|
||||
``` c++ tab="C++"
|
||||
#include <iostream>
|
||||
=== "C++"
|
||||
``` c++
|
||||
#include <iostream>
|
||||
|
||||
int main() {
|
||||
std::cout << "Hello world!" << std::endl;
|
||||
return 0;
|
||||
}
|
||||
```
|
||||
int main() {
|
||||
std::cout << "Hello world!" << std::endl;
|
||||
return 0;
|
||||
}
|
||||
```
|
||||
|
||||
``` c# tab="C#"
|
||||
using System;
|
||||
=== "C#"
|
||||
``` c#
|
||||
using System;
|
||||
|
||||
class Program {
|
||||
static void Main(string[] args) {
|
||||
Console.WriteLine("Hello world!");
|
||||
}
|
||||
}
|
||||
```
|
||||
class Program {
|
||||
static void Main(string[] args) {
|
||||
Console.WriteLine("Hello world!");
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
[5]: https://facelessuser.github.io/pymdown-extensions/extensions/superfences/
|
||||
[5]: https://facelessuser.github.io/pymdown-extensions/extensions/tabbed/
|
||||
[6]: https://facelessuser.github.io/pymdown-extensions
|
||||
|
||||
### Highlighting specific lines
|
||||
|
@ -35,6 +35,7 @@ markdown_extensions:
|
||||
- pymdownx.superfences
|
||||
- pymdownx.tasklist:
|
||||
custom_checkbox: true
|
||||
- pymdownx.tabbed
|
||||
- pymdownx.tilde
|
||||
```
|
||||
|
||||
@ -263,9 +264,41 @@ SuperFences does also allow [grouping code blocks with tabs][25].
|
||||
[24]: https://python-markdown.github.io/extensions/fenced_code_blocks/
|
||||
[25]: codehilite.md#grouping-code-blocks
|
||||
|
||||
### Tabbed
|
||||
|
||||
[Tabbed][26] adds support for creating tabbed groups of Markdown content.
|
||||
|
||||
``` markdown
|
||||
=== "Fruit List"
|
||||
- Apple
|
||||
- Banana
|
||||
- Orange
|
||||
|
||||
=== "Fruit Table"
|
||||
Fruit | Color
|
||||
------ | -----
|
||||
Apple | Red
|
||||
Banana | Yellow
|
||||
Oragne | Orange
|
||||
```
|
||||
|
||||
=== "Fruit List"
|
||||
- Apple
|
||||
- Banana
|
||||
- Orange
|
||||
|
||||
=== "Fruit Table"
|
||||
Fruit | Color
|
||||
------ | -----
|
||||
Apple | Red
|
||||
Banana | Yellow
|
||||
Oragne | Orange
|
||||
|
||||
[26]: https://facelessuser.github.io/pymdown-extensions/extensions/superfences/
|
||||
|
||||
### Tasklist
|
||||
|
||||
[Tasklist][26] adds support for styled checkbox lists. This is useful for
|
||||
[Tasklist][27] adds support for styled checkbox lists. This is useful for
|
||||
keeping track of tasks and showing what has been done and has yet to be done.
|
||||
Checkbox lists are like regular lists, but prefixed with `[ ]` for empty or
|
||||
`[x]` for filled checkboxes.
|
||||
@ -298,12 +331,12 @@ Result:
|
||||
* [ ] Aenean pretium efficitur erat, donec pharetra, ligula non scelerisque
|
||||
* [ ] Nulla vel eros venenatis, imperdiet enim id, faucibus nisi
|
||||
|
||||
[26]: https://facelessuser.github.io/pymdown-extensions/extensions/tasklist/
|
||||
[27]: https://facelessuser.github.io/pymdown-extensions/extensions/tasklist/
|
||||
|
||||
### Tilde
|
||||
|
||||
[Tilde][27] provides an easy way to ~~strike through~~ cross out text.
|
||||
[Tilde][28] provides an easy way to ~~strike through~~ cross out text.
|
||||
The portion of text that should be erased must be enclosed in two tildes
|
||||
`~~...~~` and the extension will take care of the rest.
|
||||
|
||||
[27]: https://facelessuser.github.io/pymdown-extensions/extensions/tilde/
|
||||
[28]: https://facelessuser.github.io/pymdown-extensions/extensions/tilde/
|
||||
|
File diff suppressed because one or more lines are too long
1
material/assets/javascripts/bundle.299219a4.min.js.map
Normal file
1
material/assets/javascripts/bundle.299219a4.min.js.map
Normal file
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
@ -1,10 +1,10 @@
|
||||
{
|
||||
"assets/javascripts/bundle.js": "assets/javascripts/bundle.df0a4fb1.min.js",
|
||||
"assets/javascripts/bundle.js.map": "assets/javascripts/bundle.df0a4fb1.min.js.map",
|
||||
"assets/javascripts/bundle.js": "assets/javascripts/bundle.299219a4.min.js",
|
||||
"assets/javascripts/bundle.js.map": "assets/javascripts/bundle.299219a4.min.js.map",
|
||||
"assets/javascripts/worker/packer.js": "assets/javascripts/worker/packer.c14659e8.min.js",
|
||||
"assets/javascripts/worker/packer.js.map": "assets/javascripts/worker/packer.c14659e8.min.js.map",
|
||||
"assets/javascripts/worker/search.js": "assets/javascripts/worker/search.ce66ce8d.min.js",
|
||||
"assets/javascripts/worker/search.js.map": "assets/javascripts/worker/search.ce66ce8d.min.js.map",
|
||||
"assets/stylesheets/app-palette.scss": "assets/stylesheets/app-palette.8c25017f.min.css",
|
||||
"assets/stylesheets/app.scss": "assets/stylesheets/app.a6040c1b.min.css"
|
||||
"assets/stylesheets/app.scss": "assets/stylesheets/app.4cba2899.min.css"
|
||||
}
|
File diff suppressed because one or more lines are too long
@ -43,7 +43,7 @@
|
||||
{% endif %}
|
||||
{% endblock %}
|
||||
{% block styles %}
|
||||
<link rel="stylesheet" href="{{ 'assets/stylesheets/app.a6040c1b.min.css' | url }}">
|
||||
<link rel="stylesheet" href="{{ 'assets/stylesheets/app.4cba2899.min.css' | url }}">
|
||||
{% if palette.primary or palette.accent %}
|
||||
<link rel="stylesheet" href="{{ 'assets/stylesheets/app-palette.8c25017f.min.css' | url }}">
|
||||
{% endif %}
|
||||
@ -190,7 +190,7 @@
|
||||
{% endblock %}
|
||||
</div>
|
||||
{% block scripts %}
|
||||
<script src="{{ 'assets/javascripts/bundle.df0a4fb1.min.js' | url }}"></script>
|
||||
<script src="{{ 'assets/javascripts/bundle.299219a4.min.js' | url }}"></script>
|
||||
<script id="__lang" type="application/json">
|
||||
{%- set translations = {} -%}
|
||||
{%- for key in [
|
||||
|
@ -104,6 +104,7 @@ markdown_extensions:
|
||||
- pymdownx.mark
|
||||
- pymdownx.smartsymbols
|
||||
- pymdownx.superfences
|
||||
- pymdownx.tabbed
|
||||
- pymdownx.tasklist:
|
||||
custom_checkbox: true
|
||||
- pymdownx.tilde
|
||||
|
@ -23,4 +23,4 @@ mkdocs>=1.0
|
||||
mkdocs-minify-plugin>=0.2
|
||||
Pygments>=2.2
|
||||
markdown>=3.2
|
||||
pymdown-extensions>=6.3
|
||||
pymdown-extensions>=7.0b1
|
||||
|
@ -64,7 +64,7 @@
|
||||
@import "extensions/pymdown/details";
|
||||
@import "extensions/pymdown/emoji";
|
||||
@import "extensions/pymdown/inlinehilite";
|
||||
@import "extensions/pymdown/superfences";
|
||||
@import "extensions/pymdown/tabbed";
|
||||
@import "extensions/pymdown/tasklist";
|
||||
|
||||
@import "shame";
|
||||
|
@ -28,7 +28,7 @@
|
||||
.md-typeset {
|
||||
|
||||
// Tabbed code block content
|
||||
.superfences-content {
|
||||
.tabbed-content {
|
||||
display: none;
|
||||
order: 99;
|
||||
width: 100%;
|
||||
@ -42,7 +42,7 @@
|
||||
}
|
||||
|
||||
// Tabbed code block container
|
||||
.superfences-tabs {
|
||||
.tabbed-set {
|
||||
display: flex;
|
||||
position: relative;
|
||||
flex-wrap: wrap;
|
||||
@ -59,8 +59,26 @@
|
||||
font-weight: 700;
|
||||
|
||||
// Show code tab content
|
||||
& + .superfences-content {
|
||||
& + .tabbed-content {
|
||||
display: block;
|
||||
padding: 0 px2rem(12px);
|
||||
|
||||
// Adjust spacing on last element
|
||||
> :last-child {
|
||||
margin-bottom: px2rem(12px);
|
||||
}
|
||||
|
||||
> {
|
||||
div.highlight,
|
||||
div.codehilite,
|
||||
pre,
|
||||
table.highlighttable,
|
||||
table.codehilitetable {
|
||||
&:only-child {
|
||||
margin: 0 px2rem(-12px);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -81,7 +99,7 @@
|
||||
}
|
||||
|
||||
// Full-width container on top-level
|
||||
> .superfences-tabs {
|
||||
> .tabbed-set {
|
||||
|
||||
// [mobile -]: Stretch to whole width
|
||||
@include break-to-device(mobile) {
|
Loading…
Reference in New Issue
Block a user