Skip to content

Commit

Permalink
Improve code block styling
Browse files Browse the repository at this point in the history
- Handle various `html_codeblock_linenos_style` settings consistently.
- Make line numbers and prompts unselectable.
- Don't reduce opacity.
- Increase the region covered by `hll`.
  • Loading branch information
pradyunsg committed Nov 17, 2021
1 parent bdcf32e commit fe6217c
Showing 1 changed file with 35 additions and 12 deletions.
47 changes: 35 additions & 12 deletions src/furo/assets/styles/content/_code.sass
Original file line number Diff line number Diff line change
Expand Up @@ -13,12 +13,15 @@ code.literal
$code-spacing-vertical: 0.625rem
$code-spacing-horizontal: 0.875rem

article
// Wraps every literal block + line numbers.
div[class*=" highlight-"],
div[class^="highlight-"]
margin: 1em 0
display: flex
// Wraps every literal block + line numbers.
div[class*=" highlight-"],
div[class^="highlight-"]
margin: 1em 0
display: flex

.table-wrapper
margin: 0
padding: 0

pre
margin: 0
Expand All @@ -43,12 +46,25 @@ pre
background-color: var(--color-code-background)
color: var(--color-code-foreground)

// All code is always contained in a pre
// All code is always contained in this.
.highlight
width: 100%
border-radius: 0.2rem

// Added when there's line numbers associated with a literal block.
// Make line numbers and prompts un-selectable.
.gp, span.linenos
user-select: none
pointer-events: none

// Expand the line-highlighting.
.hll
display: block
margin-left: -$code-spacing-horizontal
margin-right: -$code-spacing-horizontal
padding-left: $code-spacing-horizontal
padding-right: $code-spacing-horizontal

// When `html_codeblock_linenos_style` is table.
.highlighttable
width: 100%
display: block
Expand All @@ -68,11 +84,9 @@ pre
border-bottom-left-radius: 0.2rem

.linenodiv
padding-right: $code-spacing-horizontal
font-size: var(--code-font-size)

padding-right: 0.5rem
box-shadow: -0.0625rem 0 var(--color-code-foreground) inset
opacity: 0.5 // I hate myself.
box-shadow: -0.0625rem 0 var(--color-foreground-border) inset

// Actual code
td.code
Expand All @@ -84,3 +98,12 @@ pre
.highlight
border-top-left-radius: 0
border-bottom-left-radius: 0

// When `html_codeblock_linenos_style` is inline.
.highlight
span.linenos
display: inline-block
padding-left: 0
padding-right: $code-spacing-horizontal
margin-right: $code-spacing-horizontal
box-shadow: -0.0625rem 0 var(--color-foreground-border) inset

0 comments on commit fe6217c

Please sign in to comment.