Fixed code block highlighting issues with superfences

This commit is contained in:
squidfunk 2020-02-08 21:50:25 +01:00
parent eab7148337
commit c177506550
8 changed files with 58 additions and 95 deletions

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

View File

@ -56,7 +56,7 @@
{% endif %}
{% endblock %}
{% block styles %}
<link rel="stylesheet" href="{{ 'assets/stylesheets/application.592ad16c.css' | url }}">
<link rel="stylesheet" href="{{ 'assets/stylesheets/application.f3fac315.css' | url }}">
{% if palette.primary or palette.accent %}
<link rel="stylesheet" href="{{ 'assets/stylesheets/application-palette.a8b3c06d.css' | url }}">
{% endif %}
@ -69,7 +69,7 @@
{% endif %}
{% endblock %}
{% block libs %}
<script src="{{ 'assets/javascripts/modernizr.268332fc.js' | url }}"></script>
<script src="{{ 'assets/javascripts/modernizr.86422ebf.js' | url }}"></script>
{% endblock %}
{% block fonts %}
{% if font != false %}
@ -209,7 +209,7 @@
{% endblock %}
</div>
{% block scripts %}
<script src="{{ 'assets/javascripts/application.7a53717d.js' | url }}"></script>
<script src="{{ 'assets/javascripts/application.38aa6250.js' | url }}"></script>
{% if lang.t("search.language") != "en" %}
{% set languages = lang.t("search.language").split(",") %}
{% if languages | length and languages[0] != "" %}

View File

@ -102,7 +102,7 @@ function initialize(config) { // eslint-disable-line func-style
/* Clipboard integration */
if (Clipboard.isSupported()) {
const blocks = document.querySelectorAll(".codehilite > pre, pre > code")
const blocks = document.querySelectorAll("pre > code")
Array.prototype.forEach.call(blocks, (block, index) => {
const id = `__code_${index}`

View File

@ -224,12 +224,6 @@ kbd {
line-height: 1.4;
-webkit-overflow-scrolling: touch;
// [mobile -]: Stretch to whole width
@include break-to-device(mobile) {
margin: 1em px2rem(-16px);
border-radius: 0;
}
// Actual container with code, overflowing
> code {
display: block;
@ -241,11 +235,6 @@ kbd {
box-decoration-break: slice;
overflow: auto;
// [mobile -]: Increase padding to match text
@include break-to-device(mobile) {
padding: px2rem(10.5px) px2rem(16px);
}
// Override native scrollbar styles
&::-webkit-scrollbar {
width: px2rem(4px);
@ -264,6 +253,21 @@ kbd {
}
}
// [mobile -]: Stretch to whole width
@include break-to-device(mobile) {
// Stretch top-level containers
> pre {
margin: 1em px2rem(-16px);
border-radius: 0;
// Actual container with code, overflowing
> code {
padding: px2rem(10.5px) px2rem(16px);
}
}
}
// Keystrokes
kbd {
$correct: 1 / 0.85;

View File

@ -206,13 +206,6 @@ $codehilite-whitespace: transparent;
}
}
// When pymdownx.superfences is enabled but codehilite is disabled,
// pymdownx.highlight will be used. When this happens, the outer
// container and tables get this class names by default.
.highlight {
@extend .codehilite;
}
// ----------------------------------------------------------------------------
// Rules: layout
// ----------------------------------------------------------------------------
@ -223,9 +216,6 @@ $codehilite-whitespace: transparent;
// Block with line numbers
.codehilitetable {
display: block;
margin: 1em 0;
border-radius: 0.2em;
font-size: ms(0);
overflow: hidden;
// Set table elements to block layout, because otherwise the whole flexbox
@ -278,11 +268,27 @@ $codehilite-whitespace: transparent;
}
}
// Full-width container on top-level
// Block with line numbers
> .codehilitetable {
margin: 1em 0;
border-radius: 0.2em;
}
// [mobile -]: Stretch to whole width
@include break-to-device(mobile) {
// [mobile -]: Stretch to whole width
@include break-to-device(mobile) {
// Full-width container
> .codehilite {
margin: 1em px2rem(-16px);
// Actual container with code, overflowing
code {
padding: px2rem(10.5px) px2rem(16px);
}
}
// Full-width container on top-level
> .codehilitetable {
margin: 1em px2rem(-16px);
border-radius: 0;
@ -292,4 +298,16 @@ $codehilite-whitespace: transparent;
}
}
}
// When pymdownx.superfences is enabled but codehilite is disabled,
// pymdownx.highlight will be used. When this happens, the outer
// container and tables get this class names by default.
.highlight {
@extend .codehilite;
}
// Same as above, but for code blocks with line numbers enabled
.highlighttable {
@extend .codehilitetable;
}
}

View File

@ -35,7 +35,7 @@
background-color: $md-color-white;
// Actual content
> * {
pre {
margin: 0;
border-radius: 0
}
@ -89,11 +89,14 @@
border: 0;
border-top: px2rem(1px) solid $md-color-black--lightest;
border-radius: 0;
}
// Actual container with code, overflowing
pre,
code {
padding: px2rem(10.5px) px2rem(16px);
// [mobile -]: Stretch to whole width
@include break-to-device(mobile) {
// First tab label
input:first-child + label {
margin-left: px2rem(4px);
}
}
}