Add highlight js
This commit is contained in:
parent
c367d5b613
commit
fa21c85a13
@ -118,7 +118,11 @@ class NoteView(staticFileResolver: StaticFileResolver) : View(staticFileResolver
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
fun renderedNote(jwtPayload: JwtPayload, note: PersistedNote) = renderPage(note.meta.title, jwtPayload = jwtPayload) {
|
fun renderedNote(jwtPayload: JwtPayload, note: PersistedNote) = renderPage(
|
||||||
|
note.meta.title,
|
||||||
|
jwtPayload = jwtPayload,
|
||||||
|
scripts = listOf("/highlight.10.1.2.js","/init-highlight.0.0.1.js")
|
||||||
|
) {
|
||||||
div("container mx-auto p-4") {
|
div("container mx-auto p-4") {
|
||||||
div("flex items-center justify-between mb-4") {
|
div("flex items-center justify-between mb-4") {
|
||||||
h1("text-3xl fond-bold underline") { +note.meta.title }
|
h1("text-3xl fond-bold underline") { +note.meta.title }
|
||||||
|
|||||||
@ -14,6 +14,7 @@ abstract class View(private val staticFileResolver: StaticFileResolver) {
|
|||||||
title: String,
|
title: String,
|
||||||
description: String? = null,
|
description: String? = null,
|
||||||
jwtPayload: JwtPayload?,
|
jwtPayload: JwtPayload?,
|
||||||
|
scripts: List<String> = emptyList(),
|
||||||
body: MAIN.() -> Unit = {},
|
body: MAIN.() -> Unit = {},
|
||||||
) = buildString {
|
) = buildString {
|
||||||
appendLine("<!DOCTYPE html>")
|
appendLine("<!DOCTYPE html>")
|
||||||
@ -26,6 +27,9 @@ abstract class View(private val staticFileResolver: StaticFileResolver) {
|
|||||||
description?.let { meta(name = "description", content = it) }
|
description?.let { meta(name = "description", content = it) }
|
||||||
link(rel = "stylesheet", href = styles)
|
link(rel = "stylesheet", href = styles)
|
||||||
link(rel = "shortcut icon", href = "/favicon.ico", type = "image/x-icon")
|
link(rel = "shortcut icon", href = "/favicon.ico", type = "image/x-icon")
|
||||||
|
scripts.forEach { src ->
|
||||||
|
script(src = src) {}
|
||||||
|
}
|
||||||
}
|
}
|
||||||
body("bg-gray-900 text-white") {
|
body("bg-gray-900 text-white") {
|
||||||
navbar(jwtPayload)
|
navbar(jwtPayload)
|
||||||
|
|||||||
39
app/src/main/resources/static/highlight.10.1.2.js
Normal file
39
app/src/main/resources/static/highlight.10.1.2.js
Normal file
File diff suppressed because one or more lines are too long
5
app/src/main/resources/static/init-highlight.0.0.1.js
Normal file
5
app/src/main/resources/static/init-highlight.0.0.1.js
Normal file
@ -0,0 +1,5 @@
|
|||||||
|
document.addEventListener('DOMContentLoaded', () => {
|
||||||
|
document.querySelectorAll('#note pre code').forEach((b) => {
|
||||||
|
hljs.highlightBlock(b);
|
||||||
|
});
|
||||||
|
});
|
||||||
51
css/src/hljs.pcss
Normal file
51
css/src/hljs.pcss
Normal file
@ -0,0 +1,51 @@
|
|||||||
|
.hljs {
|
||||||
|
@apply block p-2;
|
||||||
|
}
|
||||||
|
|
||||||
|
.hljs, .hljs-subst {
|
||||||
|
@apply text-white;
|
||||||
|
}
|
||||||
|
|
||||||
|
.hljs-comment {
|
||||||
|
@apply text-gray-300;
|
||||||
|
}
|
||||||
|
|
||||||
|
.hljs-attribute, .hljs-doctag, .hljs-keyword, .hljs-meta-keyword, .hljs-name, .hljs-selector-tag {
|
||||||
|
@apply font-bold;
|
||||||
|
}
|
||||||
|
|
||||||
|
.hljs-deletion, .hljs-number, .hljs-quote, .hljs-selector-class, .hljs-selector-id, .hljs-string, .hljs-template-tag, .hljs-type {
|
||||||
|
@apply text-red-500;
|
||||||
|
}
|
||||||
|
|
||||||
|
.hljs-section, .hljs-title {
|
||||||
|
@apply font-bold text-red-500;
|
||||||
|
}
|
||||||
|
|
||||||
|
.hljs-link, .hljs-regexp, .hljs-selector-attr, .hljs-selector-pseudo, .hljs-symbol, .hljs-template-variable, .hljs-variable {
|
||||||
|
@apply text-red-300;
|
||||||
|
}
|
||||||
|
|
||||||
|
.hljs-literal {
|
||||||
|
@apply text-green-300;
|
||||||
|
}
|
||||||
|
|
||||||
|
.hljs-addition, .hljs-built_in, .hljs-bullet, .hljs-code {
|
||||||
|
@apply text-green-300;
|
||||||
|
}
|
||||||
|
|
||||||
|
.hljs-meta {
|
||||||
|
@apply text-blue-500;
|
||||||
|
}
|
||||||
|
|
||||||
|
.hljs-meta-string {
|
||||||
|
@apply text-blue-300;
|
||||||
|
}
|
||||||
|
|
||||||
|
.hljs-emphasis {
|
||||||
|
@apply italic;
|
||||||
|
}
|
||||||
|
|
||||||
|
.hljs-strong {
|
||||||
|
@apply font-bold;
|
||||||
|
}
|
||||||
@ -10,6 +10,7 @@
|
|||||||
@import "./other.pcss";
|
@import "./other.pcss";
|
||||||
@import "./navbar.pcss";
|
@import "./navbar.pcss";
|
||||||
@import "./note-table.pcss";
|
@import "./note-table.pcss";
|
||||||
|
@import "./hljs.pcss";
|
||||||
|
|
||||||
/*noinspection CssUnknownTarget*/
|
/*noinspection CssUnknownTarget*/
|
||||||
@import "tailwindcss/utilities";
|
@import "tailwindcss/utilities";
|
||||||
|
|||||||
Loading…
x
Reference in New Issue
Block a user