OpenSourceArk/mkdocs-material
1
0
Fork 0
mirror of https://github.com/squidfunk/mkdocs-material.git synced 2024-06-14 11:52:32 +03:00
Code Issues Packages Projects Releases Wiki Activity

Fixed inline line highlight padding, wrapping, and gutter background (#1501)

Browse Source 
* Fix inline line highlight padding, wrapping, and gutter background
- Line highlight pad should match the parent
- Float the gutter left to force code and numbers not to wrap
- Provide a background for the gutter

* Use opaque color for code background

* Fix for root level stretched code blocks

* Normalize code block padding

* Revert normalization
This commit is contained in:
Isaac Muse 2020-03-12 09:39:35 -06:00 committed by GitHub
parent 335b50d0a5
commit 4044ce14ba
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
3 changed files with 18 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
src/assets/stylesheets/base/_colors.scss
View File

@ -51,6 +51,6 @@
--md-accent-bg-color--light: var(--md-default-bg-color--light); --md-accent-bg-color--light: var(--md-default-bg-color--light);
// Code block color shades // Code block color shades
--md-code-bg-color: hsla(0, 0%, 92.5%, 0.5); --md-code-bg-color: hsla(0, 0%, 96%, 1);
--md-code-fg-color: hsla(200, 18%, 26%, 1); --md-code-fg-color: hsla(200, 18%, 26%, 1);
} }

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

@ -194,8 +194,8 @@ $codehilite-whitespace: transparent;
// Highlighted lines // Highlighted lines
.hll { .hll {
display: block; display: block;
margin: 0 px2rem(-16px); margin: 0 px2em(-16px, 13.6px);
padding: 0 px2rem(16px); padding: 0 px2em(16px, 13.6px);
background-color: transparentize($clr-yellow-500, 0.5); background-color: transparentize($clr-yellow-500, 0.5);
} }
} }
@ -280,6 +280,11 @@ $codehilite-whitespace: transparent;
> .codehilite { > .codehilite {
margin: 1em px2rem(-16px); margin: 1em px2rem(-16px);
.hll {
margin: 0 px2rem(-16px);
padding: 0 px2rem(16px);
}
// Remove rounded borders // Remove rounded borders
code { code {
border-radius: 0; border-radius: 0;
@ -290,6 +295,11 @@ $codehilite-whitespace: transparent;
> .codehilitetable { > .codehilitetable {
margin: 1em px2rem(-16px); margin: 1em px2rem(-16px);
border-radius: 0; border-radius: 0;
.hll {
margin: 0 px2rem(-16px);
padding: 0 px2rem(16px);
}
} }
} }
} }

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

@ -33,9 +33,13 @@
// Inline line numbers // Inline line numbers
[data-linenos]::before { [data-linenos]::before {
position: sticky; position: sticky;
left: 0; left: px2em(-16px, 13.6px);
display: inline-block; display: inline-block;
margin-right: px2em(16px, 13.6px); margin-right: px2em(16px, 13.6px);
margin-left: px2em(-16px, 13.6px);
padding-left: px2em(16px, 13.6px);
float: left;
background-color: var(--md-code-bg-color);
color: var(--md-default-fg-color--lighter); color: var(--md-default-fg-color--lighter);
box-shadow: inset px2rem(-1px) 0 var(--md-default-fg-color--lightest); box-shadow: inset px2rem(-1px) 0 var(--md-default-fg-color--lightest);
content: attr(data-linenos); content: attr(data-linenos);