Added markdown rendering

This commit is contained in:
Magnus Åhall 2026-05-15 08:22:43 +02:00
parent 26ca510785
commit 5a0340c226
172 changed files with 12198 additions and 8338 deletions

30
static/css/markdown.css Normal file
View file

@ -0,0 +1,30 @@
.el-node-markdown {
h1 {
border-bottom: 1px solid #ccc;
margin-top: 48px;
margin-bottom: 8px;
display: inline-block;
font-size: 1.25em;
border-radius: 8px;
color: #fff;
background-color: var(--color1);
padding: 4px 12px;
&:first-child {
margin-top: 32px;
}
}
h2 {
font-size: 1.25em;
margin-bottom: 0px;
color: var(--color1);
}
h3:before {
font-size: 1.0em;
content: "> ";
color: var(--color1);
}
}

View file

@ -13,17 +13,13 @@ html {
display: grid;
grid-template-areas:
"tree crumbs"
"tree name"
"tree sync"
"tree content"
/*
"tree checklist"
"tree files"
*/
"tree blank"
"tree hum crumbs crumbs ding"
"tree hum name name ding"
"tree hum sync functions ding"
"tree hum content content ding"
"tree hum blank blank ding"
;
grid-template-columns: min-content 1fr;
grid-template-columns: min-content minmax(16px, 1fr) minmax(min-content, 820px) 80px minmax(16px, 1fr);
grid-template-rows:
min-content min-content 48px 1fr;
@ -34,10 +30,6 @@ html {
"sync"
"name"
"content"
/*
"checklist"
"files"
*/
"blank"
;
grid-template-columns: 1fr;
@ -61,11 +53,10 @@ html {
padding: 16px 0px 16px 16px;
color: #ddd;
z-index: 100;
/* Over crumbs shadow */
border-left: 2px solid #333;
&:focus {
border-left: 2px solid #FE5F55;
border-left: 2px solid #fe5f55;
}
#logo {
@ -151,7 +142,7 @@ html {
align-items: start;
justify-items: center;
height: min-content;
margin: 16px 16px;
margin: 0 16px 16px 16px;
n2-crumbs {
background: #e4e4e4;
@ -223,8 +214,7 @@ n2-syncprogress {
}
progress {
width: calc(100% - 32px);
max-width: var(--content-width);
width: 100%;
height: 24px;
border-radius: 8px;
}
@ -272,6 +262,7 @@ n2-nodeui {
margin-bottom: 32px;
.el-name {
grid-area: name;
color: #333;
font-weight: bold;
text-align: center;
@ -280,27 +271,27 @@ n2-nodeui {
margin-bottom: 0px;
}
.el-functions {
grid-area: functions;
}
.el-node-content {
grid-area: content;
justify-self: center;
word-wrap: break-word;
font-family: monospace;
color: #333;
/*
width: 100%;
max-width: var(--content-width);
field-sizing: content;
*/
width: calc(100% - 32px);
max-width: var(--content-width);
field-sizing: content;
resize: none;
border: none;
outline: none;
padding: 16px 0;
padding: 32px 0;
border-left: none;
border-right: none;
border-top: 1px solid #e0e0e0;
border-bottom: 1px solid #e0e0e0;
margin-bottom: 32px;
@ -310,6 +301,24 @@ n2-nodeui {
padding-top: 16px;
}
}
.el-node-markdown {
grid-area: content;
display: none;
border-top: 1px solid #e0e0e0;
border-bottom: 1px solid #e0e0e0;
margin-bottom: 32px;
}
&.show-markdown {
.el-node-content {
display: none;
}
.el-node-markdown {
display: block;
}
}
}
#blank {