1
0
mirror of https://github.com/squidfunk/mkdocs-material.git synced 2024-11-27 17:00:54 +01:00

Added support for code tabs

This commit is contained in:
squidfunk 2018-06-10 17:23:06 +02:00 committed by Martin Donath
parent 55aa14014b
commit 05e4d17cbf
6 changed files with 195 additions and 7 deletions

View File

@ -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

View File

@ -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 %}

View File

@ -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";

View File

@ -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;

View 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;
}
}
}
}