mirror of
https://github.com/wavetermdev/waveterm
synced 2026-05-13 20:08:32 +00:00
072730f7eb
Adds a table of contents in the markdown preview, with a button in the header to toggle whether to show the TOC. When a user clicks one of the TOC elements, the preview will scroll to the corresponding heading. I've also cleaned up some MD preview styling that was inconsistent and causing the preview to overflow unnecessarily. This also fixes some terminology in the preview code. <img width="574" alt="image" src="https://github.com/user-attachments/assets/abb18ba9-21d3-4315-bdc3-e4bdcca39a4c">
188 lines
4.7 KiB
Text
188 lines
4.7 KiB
Text
// Copyright 2024, Command Line Inc.
|
|
// SPDX-License-Identifier: Apache-2.0
|
|
|
|
.markdown {
|
|
display: flex;
|
|
flex-direction: row;
|
|
overflow: hidden;
|
|
height: 100%;
|
|
width: 100%;
|
|
.content {
|
|
height: 100%;
|
|
width: 100%;
|
|
overflow: scroll;
|
|
line-height: 1.5;
|
|
color: var(--app-text-color);
|
|
font-family: var(--markdown-font);
|
|
font-size: 14px;
|
|
overflow-wrap: break-word;
|
|
margin-bottom: 10px;
|
|
--half-contents-height: 10em;
|
|
|
|
.heading {
|
|
&:first-of-type {
|
|
margin-top: 0 !important;
|
|
}
|
|
color: var(--app-text-color);
|
|
margin-top: 16px;
|
|
margin-bottom: 8px;
|
|
scroll-margin-block-end: var(--half-contents-height);
|
|
}
|
|
|
|
strong {
|
|
color: var(--app-text-color);
|
|
}
|
|
|
|
a {
|
|
color: #32afff;
|
|
}
|
|
|
|
table {
|
|
tr th {
|
|
color: var(--app-text-color);
|
|
}
|
|
}
|
|
|
|
ul {
|
|
list-style-type: disc;
|
|
list-style-position: outside;
|
|
margin-left: 16px;
|
|
}
|
|
|
|
ol {
|
|
list-style-position: outside;
|
|
margin-left: 19px;
|
|
}
|
|
|
|
blockquote {
|
|
margin: 4px 10px 4px 10px;
|
|
border-radius: 3px;
|
|
background-color: var(--panel-bg-color);
|
|
padding: 2px 4px 2px 6px;
|
|
}
|
|
|
|
pre.codeblock {
|
|
background-color: var(--panel-bg-color);
|
|
margin: 4px 10px;
|
|
padding: 0.4em 0.7em;
|
|
border-radius: 4px;
|
|
position: relative;
|
|
|
|
code {
|
|
line-height: 1.5;
|
|
white-space: pre-wrap;
|
|
word-wrap: break-word;
|
|
overflow: auto;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.codeblock-actions {
|
|
visibility: hidden;
|
|
display: flex;
|
|
position: absolute;
|
|
top: 4px;
|
|
right: 4px;
|
|
border-radius: 4px;
|
|
align-items: center;
|
|
justify-content: flex-end;
|
|
padding-left: 4px;
|
|
padding-right: 4px;
|
|
|
|
i {
|
|
color: var(--line-actions-inactive-color);
|
|
margin-left: 4px;
|
|
|
|
&:first-child {
|
|
margin-left: 0px;
|
|
}
|
|
|
|
&:hover {
|
|
color: var(--line-actions-active-color);
|
|
}
|
|
|
|
&.fa-check {
|
|
color: var(--success-color);
|
|
}
|
|
|
|
&.fa-square-terminal {
|
|
cursor: pointer;
|
|
}
|
|
}
|
|
}
|
|
|
|
&:hover .codeblock-actions {
|
|
visibility: visible;
|
|
}
|
|
}
|
|
|
|
code {
|
|
color: var(--app-text-color);
|
|
background-color: var(--panel-bg-color);
|
|
font-family: var(--termfontfamily);
|
|
border-radius: 4px;
|
|
}
|
|
|
|
pre.selected {
|
|
outline: 2px solid var(--accent-color);
|
|
}
|
|
|
|
.heading {
|
|
font-weight: semibold;
|
|
padding-top: 6px;
|
|
}
|
|
|
|
.heading.is-1 {
|
|
border-bottom: 1px solid var(--border-color);
|
|
padding-bottom: 6px;
|
|
font-size: 2em;
|
|
}
|
|
.heading.is-2 {
|
|
border-bottom: 1px solid var(--border-color);
|
|
padding-bottom: 6px;
|
|
font-size: 1.5em;
|
|
}
|
|
.heading.is-3 {
|
|
font-size: 1.25em;
|
|
}
|
|
.heading.is-4 {
|
|
font-size: 1em;
|
|
}
|
|
.heading.is-5 {
|
|
font-size: 0.875em;
|
|
}
|
|
.heading.is-6 {
|
|
font-size: 0.85em;
|
|
}
|
|
}
|
|
|
|
// The TOC view should scroll independently of the contents view.
|
|
.toc {
|
|
max-width: 40%;
|
|
height: 100%;
|
|
overflow: scroll;
|
|
border-left: 1px solid var(--border-color);
|
|
.toc-inner {
|
|
height: fit-content;
|
|
position: sticky;
|
|
top: 0;
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 5px;
|
|
text-wrap: wrap;
|
|
|
|
h4 {
|
|
padding-left: 5px;
|
|
}
|
|
|
|
.toc-item {
|
|
cursor: pointer;
|
|
--indent-factor: 1;
|
|
|
|
// The 5px offset in the padding will ensure that when the text in the item wraps, it indents slightly.
|
|
// The indent factor is set in the React code and denotes the depth of the item in the TOC tree.
|
|
padding-left: calc((var(--indent-factor) - 1) * 10px + 5px);
|
|
text-indent: -5px;
|
|
}
|
|
}
|
|
}
|
|
}
|