replace lolight with highlight.js

This commit is contained in:
Inhji 2023-07-13 07:33:55 +02:00
parent 2cf8cc60a8
commit c4214c85c5
7 changed files with 31 additions and 160 deletions

View file

@ -3,7 +3,7 @@
@import "tailwindcss/utilities";
@import "./reset.css";
@import "./lolight.css";
@import "./gruvbox.css";
@import "./lightbox.css";
@layer base {
@ -109,6 +109,10 @@
.prose h4 {
@apply before:content-['####'];
}
.prose pre {
@apply p-0;
}
}
@layer components {

7
assets/css/gruvbox.css Normal file
View file

@ -0,0 +1,7 @@
/*!
Theme: Gruvbox dark, hard
Author: Dawid Kurek (dawikur@gmail.com), morhetz (https://github.com/morhetz/gruvbox)
License: ~ MIT (or more permissive) [via base16-schemes-source]
Maintainer: @highlightjs/core-team
Version: 2021.09.0
*/pre code.hljs{display:block;overflow-x:auto;padding:1em}code.hljs{padding:3px 5px}.hljs{color:#d5c4a1;background:#1d2021}.hljs ::selection,.hljs::selection{background-color:#504945;color:#d5c4a1}.hljs-comment{color:#665c54}.hljs-tag{color:#bdae93}.hljs-operator,.hljs-punctuation,.hljs-subst{color:#d5c4a1}.hljs-operator{opacity:.7}.hljs-bullet,.hljs-deletion,.hljs-name,.hljs-selector-tag,.hljs-template-variable,.hljs-variable{color:#fb4934}.hljs-attr,.hljs-link,.hljs-literal,.hljs-number,.hljs-symbol,.hljs-variable.constant_{color:#fe8019}.hljs-class .hljs-title,.hljs-title,.hljs-title.class_{color:#fabd2f}.hljs-strong{font-weight:700;color:#fabd2f}.hljs-addition,.hljs-code,.hljs-string,.hljs-title.class_.inherited__{color:#b8bb26}.hljs-built_in,.hljs-doctag,.hljs-keyword.hljs-atrule,.hljs-quote,.hljs-regexp{color:#8ec07c}.hljs-attribute,.hljs-function .hljs-title,.hljs-section,.hljs-title.function_,.ruby .hljs-property{color:#83a598}.diff .hljs-meta,.hljs-keyword,.hljs-template-tag,.hljs-type{color:#d3869b}.hljs-emphasis{color:#d3869b;font-style:italic}.hljs-meta,.hljs-meta .hljs-keyword,.hljs-meta .hljs-string{color:#d65d0e}.hljs-meta .hljs-keyword,.hljs-meta-keyword{font-weight:700}

View file

@ -1,23 +0,0 @@
.ll-nam { /* words */
@apply text-theme-base;
}
.ll-num { /* numbers */
color: rgb(var(--color-purple));
}
.ll-str { /* strings */
color: rgb(var(--color-yellow));
}
.ll-rex { /* regular expressions */
color: rgb(var(--color-yellow));
}
.ll-pct { /* operators, punctation */
@apply text-theme-primary;
}
.ll-key { /* keywords */
@apply font-bold;
color: rgb(var(--color-blue));
}
.ll-com { /* comments */
@apply text-theme-base1;
font-style: italic;
}

View file

@ -1,10 +1,14 @@
// Include phoenix_html to handle method=PUT/DELETE in forms and buttons.
import "phoenix_html"
import lolight from "../vendor/lolight"
import hljs from "highlight.js"
import GLightbox from 'glightbox'
lolight("pre code")
document.addEventListener('DOMContentLoaded', (event) => {
document.querySelectorAll('pre code').forEach((el) => {
hljs.highlightElement(el);
});
});
document
.querySelector("#dark-mode-toggle")
@ -20,4 +24,6 @@ document
}
})
GLightbox({ selector: ".lightbox" })
GLightbox({ selector: ".lightbox" })
window.hljs = hljs

View file

@ -7,6 +7,7 @@
"dependencies": {
"classnames": "^2.3.2",
"glightbox": "^3.2.0",
"highlight.js": "^11.8.0",
"kbar": "^0.1.0-beta.40",
"phoenix": "file:../deps/phoenix",
"phoenix_html": "file:../deps/phoenix_html",
@ -537,6 +538,14 @@
"resolved": "https://registry.npmjs.org/glightbox/-/glightbox-3.2.0.tgz",
"integrity": "sha512-iit1xYixqL4YVL+I2YJLfMeyJwvLi6FE6kY3qNKeZHEJgRIz80QU8Rm7YCyw1wOTgXvmNDnXGVhHOHRCwnDltQ=="
},
"node_modules/highlight.js": {
"version": "11.8.0",
"resolved": "https://registry.npmjs.org/highlight.js/-/highlight.js-11.8.0.tgz",
"integrity": "sha512-MedQhoqVdr0U6SSnWPzfiadUcDHfN/Wzq25AkXiQv9oiOO/sG0S7XkvpFIqWBl9Yq1UYyYOOVORs5UW2XlPyzg==",
"engines": {
"node": ">=12.0.0"
}
},
"node_modules/js-tokens": {
"version": "4.0.0",
"resolved": "https://registry.npmjs.org/js-tokens/-/js-tokens-4.0.0.tgz",

View file

@ -5,6 +5,7 @@
"dependencies": {
"classnames": "^2.3.2",
"glightbox": "^3.2.0",
"highlight.js": "^11.8.0",
"kbar": "^0.1.0-beta.40",
"phoenix": "file:../deps/phoenix",
"phoenix_html": "file:../deps/phoenix_html",

View file

@ -1,133 +0,0 @@
/*! lolight v1.4.0 - https://larsjung.de/lolight/ */
(function (root, factory) {
if (typeof exports === 'object' && typeof module === 'object') {
module.exports = factory(); // eslint-disable-line no-undef
} else if (typeof define === 'function' && define.amd) { // eslint-disable-line no-undef
define([], factory); // eslint-disable-line no-undef
} else {
root.lolight = factory();
}
}(this, function () {
var SELECTOR = '.lolight';
var CLS_PREFIX = 'll-';
var STYLE = '_nam#2196f3}_num#ec407a}_str#43a047}_rex#ef6c00}_pct#666}_key#555;font-weight:bold}_com#aaa;font-style:italic}'.replace(/_/g, '.' + CLS_PREFIX).replace(/#/g, '{color:#');
var KEYWORD_RE = /^(a(bstract|lias|nd|rguments|rray|s(m|sert)?|uto)|b(ase|egin|ool(ean)?|reak|yte)|c(ase|atch|har|hecked|lass|lone|ompl|onst|ontinue)|de(bugger|cimal|clare|f(ault|er)?|init|l(egate|ete)?)|do|double|e(cho|ls?if|lse(if)?|nd|nsure|num|vent|x(cept|ec|p(licit|ort)|te(nds|nsion|rn)))|f(allthrough|alse|inal(ly)?|ixed|loat|or(each)?|riend|rom|unc(tion)?)|global|goto|guard|i(f|mp(lements|licit|ort)|n(it|clude(_once)?|line|out|stanceof|t(erface|ernal)?)?|s)|l(ambda|et|ock|ong)|m(odule|utable)|NaN|n(amespace|ative|ext|ew|il|ot|ull)|o(bject|perator|r|ut|verride)|p(ackage|arams|rivate|rotected|rotocol|ublic)|r(aise|e(adonly|do|f|gister|peat|quire(_once)?|scue|strict|try|turn))|s(byte|ealed|elf|hort|igned|izeof|tatic|tring|truct|ubscript|uper|ynchronized|witch)|t(emplate|hen|his|hrows?|ransient|rue|ry|ype(alias|def|id|name|of))|u(n(checked|def(ined)?|ion|less|signed|til)|se|sing)|v(ar|irtual|oid|olatile)|w(char_t|hen|here|hile|ith)|xor|yield)$/;
var COM = 'com';
var KEY = 'key';
var NAM = 'nam';
var NUM = 'num';
var PCT = 'pct';
var REX = 'rex';
var SPC = 'spc';
var STR = 'str';
var UNK = 'unk';
var TOKEN_RES = [
[NUM, /#([0-9a-f]{6}|[0-9a-f]{3})\b/],
[COM, /(\/\/|#).*?(?=\n|$)/],
[COM, /\/\*[\s\S]*?\*\//],
[COM, /<!--[\s\S]*?-->/],
[REX, /\/(\\\/|[^\n])*?\//],
[STR, /(['"`])(\\\1|[\s\S])*?\1/],
[NUM, /[+-]?([0-9]*\.?[0-9]+|[0-9]+\.?[0-9]*)([eE][+-]?[0-9]+)?/],
[PCT, /[\\.,:;+\-*\/=<>()[\]{}|?!&@~]/],
[SPC, /\s+/],
[NAM, /[\w$]+/],
[UNK, /./]
];
var tokenize = function (text) {
if (typeof text !== 'string') {
throw new Error('tok: no string');
}
var tokens = [];
var len = TOKEN_RES.length;
var prefer_div_over_re = false;
while (text) {
for (var i = 0; i < len; i += 1) {
var m = TOKEN_RES[i][1].exec(text);
if (!m || m.index !== 0) {
continue;
}
var cls = TOKEN_RES[i][0];
if (cls === REX && prefer_div_over_re) {
continue;
}
var tok = m[0];
if (cls === NAM && KEYWORD_RE.test(tok)) {
cls = KEY;
}
if (cls === SPC) {
if (tok.indexOf('\n') >= 0) {
prefer_div_over_re = false;
}
} else {
prefer_div_over_re = cls === NUM || cls === NAM;
}
text = text.slice(tok.length);
tokens.push([cls, tok]);
break;
}
}
return tokens;
};
var with_doc = function (fail, fn) {
if (typeof document !== 'undefined') {
fn(document); // eslint-disable-line no-undef
} else if (fail) {
throw new Error('no doc');
}
};
var highlight_el = function (el) {
with_doc(true, function (doc) {
var tokens = tokenize(el.textContent);
el.innerHTML = '';
tokens.forEach(function (token) {
var tok_el = doc.createElement('span');
tok_el.className = CLS_PREFIX + token[0];
tok_el.textContent = token[1];
el.appendChild(tok_el);
});
});
};
var lolight = function (sel) {
with_doc(true, function (doc) {
[].forEach.call(doc.querySelectorAll(sel || SELECTOR), function (el) {
highlight_el(el);
});
});
};
with_doc(false, function (doc) {
// do it with style
var head = doc.querySelector('head');
var style = doc.createElement('style');
style.textContent = STYLE;
head.insertBefore(style, head.firstChild);
// auto highlight
if ((/^(i|c|loade)/).test(doc.readyState)) {
lolight();
} else {
doc.addEventListener('DOMContentLoaded', function () {
lolight();
});
}
});
lolight.tok = tokenize;
lolight.el = highlight_el;
return lolight;
}));