mirror of
https://github.com/squidfunk/mkdocs-material.git
synced 2024-11-12 01:50:52 +01:00
Added support for code tabs
This commit is contained in:
parent
55aa14014b
commit
05e4d17cbf
@ -108,7 +108,7 @@ Line numbers can be added by enabling the `linenums` flag in your `mkdocs.yml`:
|
||||
``` yaml
|
||||
markdown_extensions:
|
||||
- codehilite:
|
||||
linenums:true
|
||||
linenums: true
|
||||
```
|
||||
|
||||
Example:
|
||||
@ -134,6 +134,87 @@ Result:
|
||||
if items[j] > items[j + 1]:
|
||||
items[j], items[j + 1] = items[j + 1], items[j]
|
||||
|
||||
### 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
|
||||
useful for documenting projects with multiple language bindings.
|
||||
|
||||
Example:
|
||||
|
||||
````
|
||||
``` bash tab="Bash"
|
||||
#!/bin/bash
|
||||
|
||||
echo "Hello world!"
|
||||
```
|
||||
|
||||
``` c tab="C"
|
||||
#include <stdio.h>
|
||||
|
||||
int main(void) {
|
||||
printf("Hello world!\n");
|
||||
}
|
||||
```
|
||||
|
||||
``` c++ tab="C++"
|
||||
#include <iostream>
|
||||
|
||||
int main() {
|
||||
std::cout << "Hello world!" << std::endl;
|
||||
return 0;
|
||||
}
|
||||
```
|
||||
|
||||
``` c# tab="C#"
|
||||
using System;
|
||||
|
||||
class Program {
|
||||
static void Main(string[] args) {
|
||||
Console.WriteLine("Hello world!");
|
||||
}
|
||||
}
|
||||
```
|
||||
````
|
||||
|
||||
Result:
|
||||
|
||||
``` bash tab="Bash"
|
||||
#!/bin/bash
|
||||
|
||||
echo "Hello world!"
|
||||
```
|
||||
|
||||
``` c tab="C"
|
||||
#include <stdio.h>
|
||||
|
||||
int main(void) {
|
||||
printf("Hello world!\n");
|
||||
}
|
||||
```
|
||||
|
||||
``` c++ tab="C++"
|
||||
#include <iostream>
|
||||
|
||||
int main() {
|
||||
std::cout << "Hello world!" << std::endl;
|
||||
return 0;
|
||||
}
|
||||
```
|
||||
|
||||
``` c# tab="C#"
|
||||
using System;
|
||||
|
||||
class Program {
|
||||
static void Main(string[] args) {
|
||||
Console.WriteLine("Hello world!");
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
[5]: https://facelessuser.github.io/pymdown-extensions/extensions/superfences/
|
||||
[6]: https://facelessuser.github.io/pymdown-extensions
|
||||
|
||||
### Highlighting specific lines
|
||||
|
||||
Specific lines can be highlighted by passing the line numbers to the `hl_lines`
|
||||
@ -162,7 +243,6 @@ Result:
|
||||
if items[j] > items[j + 1]:
|
||||
items[j], items[j + 1] = items[j + 1], items[j]
|
||||
|
||||
|
||||
## Supported languages <small>excerpt</small>
|
||||
|
||||
CodeHilite uses [Pygments][2], a generic syntax highlighter with support for
|
||||
|
File diff suppressed because one or more lines are too long
@ -48,7 +48,7 @@
|
||||
{% endif %}
|
||||
{% endblock %}
|
||||
{% block styles %}
|
||||
<link rel="stylesheet" href="{{ base_url }}/assets/stylesheets/application.fc30eec9.css">
|
||||
<link rel="stylesheet" href="{{ base_url }}/assets/stylesheets/application.e8ff00e1.css">
|
||||
{% if palette.primary or palette.accent %}
|
||||
<link rel="stylesheet" href="{{ base_url }}/assets/stylesheets/application-palette.6079476c.css">
|
||||
{% endif %}
|
||||
|
@ -63,6 +63,7 @@
|
||||
@import "extensions/pymdown/details";
|
||||
@import "extensions/pymdown/emoji";
|
||||
@import "extensions/pymdown/inlinehilite";
|
||||
@import "extensions/pymdown/superfences";
|
||||
@import "extensions/pymdown/tasklist";
|
||||
|
||||
@import "shame";
|
||||
|
@ -253,7 +253,7 @@ $codehilite-whitespace: transparent;
|
||||
}
|
||||
}
|
||||
|
||||
// If not using Pygments, code will be under pre>code
|
||||
// If not using Pygments, code will be under pre > code
|
||||
pre.codehilite {
|
||||
overflow: visible;
|
||||
|
||||
@ -341,7 +341,7 @@ $codehilite-whitespace: transparent;
|
||||
}
|
||||
}
|
||||
|
||||
// Full-width container
|
||||
// Full-width container on top-level
|
||||
> .codehilitetable {
|
||||
box-shadow: none;
|
||||
|
||||
|
107
src/assets/stylesheets/extensions/pymdown/_superfences.scss
Normal file
107
src/assets/stylesheets/extensions/pymdown/_superfences.scss
Normal file
@ -0,0 +1,107 @@
|
||||
////
|
||||
/// Copyright (c) 2016-2018 Martin Donath <martin.donath@squidfunk.com>
|
||||
///
|
||||
/// Permission is hereby granted, free of charge, to any person obtaining a
|
||||
/// copy of this software and associated documentation files (the "Software"),
|
||||
/// to deal in the Software without restriction, including without limitation
|
||||
/// the rights to use, copy, modify, merge, publish, distribute, sublicense,
|
||||
/// and/or sell copies of the Software, and to permit persons to whom the
|
||||
/// Software is furnished to do so, subject to the following conditions:
|
||||
///
|
||||
/// The above copyright notice and this permission notice shall be included in
|
||||
/// all copies or substantial portions of the Software.
|
||||
///
|
||||
/// THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
|
||||
/// IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
|
||||
/// FITNESS FOR A PARTICULAR PURPOSE AND NON-INFRINGEMENT. IN NO EVENT SHALL
|
||||
/// THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
|
||||
/// LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING
|
||||
/// FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER
|
||||
/// DEALINGS
|
||||
////
|
||||
|
||||
// ----------------------------------------------------------------------------
|
||||
// Rules
|
||||
// ----------------------------------------------------------------------------
|
||||
|
||||
// Scoped in typesetted content to match specificity of regular content
|
||||
.md-typeset {
|
||||
|
||||
// Tabbed code block content
|
||||
.superfences-content {
|
||||
display: none;
|
||||
order: 99;
|
||||
width: 100%;
|
||||
background-color: $md-color-white;
|
||||
|
||||
// Actual content
|
||||
> * {
|
||||
margin: 0;
|
||||
border-radius: 0
|
||||
}
|
||||
}
|
||||
|
||||
// Tabbed code block container
|
||||
.superfences-tabs {
|
||||
display: flex;
|
||||
position: relative;
|
||||
flex-wrap: wrap;
|
||||
border-top: 0.1rem solid $md-color-black--lightest;
|
||||
border-radius: 0.2em;
|
||||
|
||||
// [mobile +]: Collapse tab labels
|
||||
@include break-from-device(tablet) {
|
||||
border: 0.1rem solid $md-color-black--lightest;
|
||||
}
|
||||
|
||||
// Hide radio buttons
|
||||
& > input {
|
||||
display: none;
|
||||
|
||||
// Active tab label
|
||||
&:checked + label {
|
||||
font-weight: 700;
|
||||
|
||||
// Show code tab content
|
||||
& + .superfences-content {
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Tab label
|
||||
& > label {
|
||||
width: auto;
|
||||
padding: 1.2rem 1.6rem;
|
||||
transition: color 0.125s;
|
||||
font-size: ms(-1);
|
||||
cursor: pointer;
|
||||
|
||||
// Hovered tab label
|
||||
html &:hover {
|
||||
color: $md-color-accent;
|
||||
}
|
||||
|
||||
// [mobile +]: Collapse tab labels
|
||||
@include break-from-device(tablet) {
|
||||
padding: 1.2rem 1.2rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Full-width container on top-level
|
||||
> .superfences-tabs {
|
||||
|
||||
// [mobile -]: Stretch to whole width
|
||||
@include break-to-device(mobile) {
|
||||
margin: 1em -1.6rem;
|
||||
border-radius: 0;
|
||||
|
||||
// Actual container with code, overflowing
|
||||
pre,
|
||||
code {
|
||||
padding: 1.05rem 1.6rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
Loading…
Reference in New Issue
Block a user