magnus/Notes2
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Headings with lines to divide the page

Browse source
This commit is contained in:
Magnus Åhall 2026-06-08 22:24:28 +02:00
parent 389c2fe69a
commit 805f7ae318
2 changed files with 37 additions and 7 deletions
Download patch file Download diff file Expand all files Collapse all files

37
static/css/markdown.css
View file

@ -1,11 +1,27 @@
.el-node-markdown {
padding-top: 16px;
h1 {
border-bottom: 1px solid #ccc;
.heading-container {
display: grid;
grid-template-columns: min-content 1fr;
grid-gap: 16px;
white-space: nowrap;
align-items: center;
margin-top: 32px;
margin-bottom: 8px;
&:first-child {
margin-top: 32px;
}
.line {
border-bottom: 1px solid var(--line-color);
}
}
h1 {
border-bottom: 1px solid #ccc;
display: inline-block;
font-size: 1.25em;
@ -14,24 +30,33 @@
background-color: var(--color1);
padding: 4px 12px;
&:first-child {
margin-top: 32px;
}
margin-top: 0px;
margin-bottom: 0px;
}
h2 {
font-size: 1.25em;
margin-top: 32px;
margin-top: 0px;
margin-bottom: 0px;
color: var(--color1);
}
h2+.line,
h3+.line {
border-bottom: none !important;
}
h3:before {
font-size: 1.0em;
content: "> ";
color: var(--color1);
}
a {
color: var(--color1);
}
p {
line-height: 150%;
}

7
static/js/marked_position.mjs
View file

@ -114,7 +114,12 @@ export class MarkedPosition {
renderer: {
heading(token) {
const content = this.parser.parseInline(token.tokens)
return `<h${token.depth} ondblclick="setpos(event)" data-offset-start="${token.position.start.offset}" data-offset-end="${token.position.end.offset}">${content}</h${token.depth}>\n`
return `
<div class="heading-container">
<h${token.depth} ondblclick="setpos(event)" data-offset-start="${token.position.start.offset}" data-offset-end="${token.position.end.offset}">${content}</h${token.depth}>\n
<div class="line"></div>\n
</div>
`
},
paragraph(token) {