Cool_Tools/mkdocs-material
1
0
Fork 0
mirror of https://github.com/squidfunk/mkdocs-material.git synced 2024-11-12 01:50:52 +01:00
Code Issues Releases Wiki Activity

Refactored code blocks

Browse Source
This commit is contained in:
squidfunk 2020-03-10 16:42:23 +01:00
parent 12d1ad61c4
commit b6657bccda
12 changed files with 65 additions and 173 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
material/assets/javascripts/bundle.09a66b8b.min.js → material/assets/javascripts/bundle.49424ed7.min.js vendored
View File

File diff suppressed because one or more lines are too long

2
material/assets/javascripts/bundle.09a66b8b.min.js.map → material/assets/javascripts/bundle.49424ed7.min.js.map
View File

File diff suppressed because one or more lines are too long

6
material/assets/manifest.json
View File

@ -1,10 +1,10 @@
{
"assets/javascripts/bundle.js": "assets/javascripts/bundle.09a66b8b.min.js",
"assets/javascripts/bundle.js.map": "assets/javascripts/bundle.09a66b8b.min.js.map",
"assets/javascripts/bundle.js": "assets/javascripts/bundle.49424ed7.min.js",
"assets/javascripts/bundle.js.map": "assets/javascripts/bundle.49424ed7.min.js.map",
"assets/javascripts/vendor.js": "assets/javascripts/vendor.f6bd1725.min.js",
"assets/javascripts/vendor.js.map": "assets/javascripts/vendor.f6bd1725.min.js.map",
"assets/javascripts/worker/search.js": "assets/javascripts/worker/search.542c1c70.min.js",
"assets/javascripts/worker/search.js.map": "assets/javascripts/worker/search.542c1c70.min.js.map",
"assets/stylesheets/main.css": "assets/stylesheets/main.154a8287.min.css",
"assets/stylesheets/main.css": "assets/stylesheets/main.7930c394.min.css",
"assets/stylesheets/palette.css": "assets/stylesheets/palette.31180ff2.min.css"
}

1
material/assets/stylesheets/main.154a8287.min.css vendored
View File

File diff suppressed because one or more lines are too long

1
material/assets/stylesheets/main.7930c394.min.css vendored Normal file
View File

File diff suppressed because one or more lines are too long

4
material/base.html
View File

@ -41,7 +41,7 @@
{% endif %}
{% endblock %}
{% block styles %}
<link rel="stylesheet" href="{{ 'assets/stylesheets/main.154a8287.min.css' | url }}">
<link rel="stylesheet" href="{{ 'assets/stylesheets/main.7930c394.min.css' | url }}">
{% if palette.primary or palette.accent %}
<link rel="stylesheet" href="{{ 'assets/stylesheets/palette.31180ff2.min.css' | url }}">
{% endif %}
@ -178,7 +178,7 @@
{% endblock %}
{% block scripts %}
<script src="{{ 'assets/javascripts/vendor.f6bd1725.min.js' | url }}"></script>
<script src="{{ 'assets/javascripts/bundle.09a66b8b.min.js' | url }}"></script>
<script src="{{ 'assets/javascripts/bundle.49424ed7.min.js' | url }}"></script>
{%- set translations = {} -%}
{%- for key in [
"clipboard.copy",

40
src/assets/stylesheets/base/_typeset.scss
View File

@ -166,10 +166,8 @@ kbd {
pre,
kbd {
color: var(--md-code-fg-color);
font-size: 85%;
direction: ltr;
hyphens: none;
background-color: var(--md-code-bg-color);
// Wrap text and hide scollbars
@media print {
@ -179,15 +177,15 @@ kbd {
// Inline code blocks, correct relative ems for smaller font size
code {
$f: 1 / 0.85;
margin: 0 0.25em * $f;
padding: 0.0625em * $f 0;
margin: 0 px2em(4px, 13.6px);
padding: px2em(1px, 13.6px) 0;
font-size: px2em(13.6px);
word-break: break-word;
background-color: var(--md-code-bg-color);
border-radius: px2rem(2px);
box-shadow:
+0.25em * $f 0 0 var(--md-code-bg-color),
-0.25em * $f 0 0 var(--md-code-bg-color);
px2em( 4px, 13.6px) 0 0 var(--md-code-bg-color),
px2em(-4px, 13.6px) 0 0 var(--md-code-bg-color);
box-decoration-break: clone;
}
@ -218,7 +216,6 @@ kbd {
position: relative;
margin: 1em 0;
line-height: 1.4;
border-radius: px2rem(2px);
// Hack: reduce jitter
backface-visibility: hidden;
-webkit-overflow-scrolling: touch;
@ -227,11 +224,9 @@ kbd {
> code {
display: block;
margin: 0;
padding: px2rem(10.5px) px2rem(12px);
padding: px2rem(10.5px) px2em(16px, 13.6px);
overflow: auto;
font-size: inherit;
word-break: normal;
background-color: transparent;
box-shadow: none;
box-decoration-break: slice;
@ -259,22 +254,19 @@ kbd {
// Stretch top-level containers
> pre {
margin: 1em px2rem(-16px);
border-radius: 0;
// Actual container with code, overflowing
> code {
padding: px2rem(10.5px) px2rem(16px);
// Remove rounded borders
code {
border-radius: 0;
}
}
}
// Keystrokes
kbd {
$f: 1 / 0.85;
display: inline-block;
padding: 0 0.5em * $f;
font-size: 0.75em;
padding: 0 px2em(8px, 12px);
font-size: px2em(12px);
line-height: 1.5;
vertical-align: text-top;
word-break: break-word;
@ -287,14 +279,14 @@ kbd {
// Text highlighting marker
mark {
margin: 0 0.25em;
padding: 0.0625em 0;
margin: 0 px2em(4px, 16px);
padding: px2em(1px, 16px) 0;
word-break: break-word;
background-color: transparentize($clr-yellow-500, 0.5);
border-radius: px2rem(2px);
box-shadow:
+0.25em 0 0 transparentize($clr-yellow-500, 0.5),
-0.25em 0 0 transparentize($clr-yellow-500, 0.5);
px2em( 4px, 16px) 0 0 transparentize($clr-yellow-500, 0.5),
px2em(-4px, 16px) 0 0 transparentize($clr-yellow-500, 0.5);
box-decoration-break: clone;
}

50
src/assets/stylesheets/extensions/_codehilite.scss
View File

@ -194,15 +194,9 @@ $codehilite-whitespace: transparent;
// Highlighted lines
.hll {
display: block;
margin: 0 px2rem(-12px);
padding: 0 px2rem(12px);
margin: 0 px2rem(-16px);
padding: 0 px2rem(16px);
background-color: transparentize($clr-yellow-500, 0.5);
// [mobile -]: Stretch to whole width
@include break-to-device(mobile) {
margin: 0 px2rem(-16px);
padding: 0 px2rem(16px);
}
}
}
@ -231,29 +225,29 @@ $codehilite-whitespace: transparent;
// The pre tags are nested inside a table, so we need to remove the
// margin because it collapses below all the overflows
pre,
.linenodiv {
pre {
margin: 0;
border-radius: 0;
}
// Add spacing to line number container
.linenodiv {
padding: px2rem(10.5px) px2rem(12px);
}
// Disable user selection, so code can be easily copied without
// accidentally also copying the line numbers
.linenos {
color: var(--md-default-fg-color--lighter);
box-shadow: inset 0 0 0 px2rem(1px) var(--md-code-bg-color);
padding: px2rem(10.5px) px2em(16px, 13.6px);
padding-right: 0;
font-size: px2em(13.6px);
background-color: var(--md-code-bg-color);
user-select: none;
}
// Add spacing to line number container
.linenodiv {
padding-right: px2em(8px, 13.6px);
box-shadow: inset px2rem(-1px) 0 var(--md-default-fg-color--lightest);
// Reset spacings
pre {
color: inherit;
color: var(--md-default-fg-color--lighter);
text-align: right;
background-color: transparent;
}
}
@ -271,7 +265,12 @@ $codehilite-whitespace: transparent;
// Block with line numbers
> .codehilitetable {
margin: 1em 0;
border-radius: 0.2em;
border-radius: px2rem(2px);
// Remove rounded borders
code {
border-radius: 0;
}
}
// [mobile -]: Stretch to whole width
@ -281,9 +280,9 @@ $codehilite-whitespace: transparent;
> .codehilite {
margin: 1em px2rem(-16px);
// Actual container with code, overflowing
// Remove rounded borders
code {
padding: px2rem(10.5px) px2rem(16px);
border-radius: 0;
}
}
@ -291,11 +290,6 @@ $codehilite-whitespace: transparent;
> .codehilitetable {
margin: 1em px2rem(-16px);
border-radius: 0;
// Increase spacing
.linenodiv {
padding: px2rem(10px) px2rem(16px);
}
}
}
}

29
src/assets/stylesheets/extensions/pymdown/_highlight.scss
View File

@ -31,26 +31,15 @@
@extend .codehilite;
// Inline line numbers
[data-linenos] {
&::before {
position: sticky;
left: px2rem(-12px);
display: inline-block;
margin-right: px2rem(12px);
margin-left: px2rem(-12px);
padding-left: px2rem(12px);
color: var(--md-default-fg-color--lighter);
border-right: px2rem(1px) solid var(--md-default-fg-color--lightest);
content: attr(data-linenos);
user-select: none;
// [mobile -]: Stretch to whole width
@include break-to-device(mobile) {
left: px2rem(-32px);
margin-left: px2rem(-32px);
padding-left: px2rem(32px);
}
}
[data-linenos]::before {
position: sticky;
left: 0;
display: inline-block;
margin-right: px2em(16px, 13.6px);
color: var(--md-default-fg-color--lighter);
box-shadow: inset px2rem(-1px) 0 var(--md-default-fg-color--lightest);
content: attr(data-linenos);
user-select: none;
}
}

37
src/assets/stylesheets/extensions/pymdown/_inlinehilite.scss
View File

@ -1,37 +0,0 @@
////
/// Copyright (c) 2016-2020 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 {
// Qualified class selector to distinguish inline code from code blocks
code.codehilite {
$correct: 1 / 0.85;
margin: 0 0.25em * $correct;
padding: 0.0625em * $correct 0;
}
}

65
src/assets/stylesheets/extensions/pymdown/_tabbed.scss
View File

@ -27,28 +27,31 @@
// Scoped in typesetted content to match specificity of regular content
.md-typeset {
// Tabbed code block content
// Tabbed block content
.tabbed-content {
display: none;
order: 99;
width: 100%;
overflow: auto;
background-color: var(--md-code-bg-color);
// Actual content
pre {
margin: 0;
border-radius: 0
}
// Remove rounded borders at the top
code {
border-top-left-radius: 0;
border-top-right-radius: 0;
}
}
// Tabbed code block container
// Tabbed block container
.tabbed-set {
position: relative;
display: flex;
flex-wrap: wrap;
margin: 1em 0;
border: px2rem(1px) solid var(--md-default-fg-color--lightest);
border-radius: px2rem(2px);
// Hide radio buttons
@ -60,34 +63,9 @@
color: var(--md-accent-fg-color);
border-color: var(--md-accent-fg-color);
// Show code tab content
// Show tabbed block content
& + .tabbed-content {
display: block;
padding: 0 px2rem(12px);
// Adjust spacing on last element
> :last-child {
margin-bottom: px2rem(12px);
}
// Emulate original pymdownx.superfences behavior and stretch to full
// width and height when a code block is the only child of a tab
> {
pre,
.highlight,
.highlighttable,
.codehilite,
.codehilitetable {
&:only-child {
margin: 0 px2rem(-12px);
// Remove double background
pre {
background: transparent;
}
}
}
}
}
}
}
@ -95,8 +73,7 @@
// Tab label
> label {
width: auto;
padding: px2rem(12px);
padding-bottom: px2rem(10px);
padding: px2rem(12px) 1.25em px2rem(10px);
color: var(--md-default-fg-color--light);
font-weight: 700;
font-size: ms(-1);
@ -112,26 +89,4 @@
}
}
}
// Full-width container on top-level
> .tabbed-set {
// [mobile -]: Stretch to whole width
@include break-to-device(mobile) {
margin: 1em px2rem(-16px);
border: 0;
border-top: px2rem(1px) solid var(--md-default-fg-color--lightest);
border-radius: 0;
// Actual container with code, overflowing
code {
padding: px2rem(10.5px) px2rem(16px);
}
// First tab label
input:first-child + label {
margin-left: px2rem(4px);
}
}
}
}

1
src/assets/stylesheets/main.scss
View File

@ -66,7 +66,6 @@
@import "extensions/pymdown/details";
@import "extensions/pymdown/emoji";
@import "extensions/pymdown/highlight";
@import "extensions/pymdown/inlinehilite";
@import "extensions/pymdown/tabbed";
@import "extensions/pymdown/tasklist";