Add highlight js

This commit is contained in:
Hubert Van De Walle 2020-08-21 22:20:36 +02:00
parent c367d5b613
commit fa21c85a13
6 changed files with 105 additions and 1 deletions

View File

@ -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("flex items-center justify-between mb-4") {
h1("text-3xl fond-bold underline") { +note.meta.title }

View File

@ -14,6 +14,7 @@ abstract class View(private val staticFileResolver: StaticFileResolver) {
title: String,
description: String? = null,
jwtPayload: JwtPayload?,
scripts: List<String> = emptyList(),
body: MAIN.() -> Unit = {},
) = buildString {
appendLine("<!DOCTYPE html>")
@ -26,6 +27,9 @@ abstract class View(private val staticFileResolver: StaticFileResolver) {
description?.let { meta(name = "description", content = it) }
link(rel = "stylesheet", href = styles)
link(rel = "shortcut icon", href = "/favicon.ico", type = "image/x-icon")
scripts.forEach { src ->
script(src = src) {}
}
}
body("bg-gray-900 text-white") {
navbar(jwtPayload)

File diff suppressed because one or more lines are too long

View 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
View 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;
}

View File

@ -10,6 +10,7 @@
@import "./other.pcss";
@import "./navbar.pcss";
@import "./note-table.pcss";
@import "./hljs.pcss";
/*noinspection CssUnknownTarget*/
@import "tailwindcss/utilities";