From a7d6d8de5c51fd169ffd9e4caae9b39688f3eef6 Mon Sep 17 00:00:00 2001 From: lread Date: Wed, 20 Apr 2022 18:09:23 -0400 Subject: [PATCH] Render AsciiDoc code callouts Downgraded highlight.js to latest v10. Highlight.js v11, without a custom plugin, will not render embedded HTML in code blocks (which is was we need for our pretty code callouts). I don't see us missing out on any v11 features. See https://github.com/highlightjs/highlight.js/issues/2889 Required CSS mostly nabbed from: https://github.com/asciidoctor/asciidoctor/blob/main/src/stylesheets/asciidoctor.css To get code callouts to render, the AsciiDoctor `icons` attribute must be set to `font` (which is a little misleading, because it allow us to use CSS and does not require any special fonts). This did also impact rendered HTML for admonitions, so tweaked CSS so they look the same. Closes #321 --- resources/asset-deps.edn | 3 +- resources/public/cljdoc.css | 95 ++++++++++++++++++++++++++++++++- src/cljdoc/render/layout.clj | 2 +- src/cljdoc/render/rich_text.clj | 1 + src/cljdoc/render/sanitize.clj | 9 ++++ 5 files changed, 106 insertions(+), 4 deletions(-) diff --git a/resources/asset-deps.edn b/resources/asset-deps.edn index 2fe587eac..f669ff454 100644 --- a/resources/asset-deps.edn +++ b/resources/asset-deps.edn @@ -78,7 +78,8 @@ "jax/output/PreviewHTML/jax.js"]}} :highlightjs {:npm-name "highlight.js" - :version "11.5.0" + :note "Highlight.js 11 will require some plugin to support our AsciiDoc inline code callouts. See: https://github.com/highlightjs/highlight.js/issues/2889" + :version "10.7.2" :js {:root "https://cdn.jsdelivr.net/gh/highlightjs/cdn-release@{{:version}}/build/" :assets ["highlight.min.js" "languages/clojure.min.js" diff --git a/resources/public/cljdoc.css b/resources/public/cljdoc.css index b5d2c1601..fc4833d94 100644 --- a/resources/public/cljdoc.css +++ b/resources/public/cljdoc.css @@ -317,7 +317,25 @@ table.frame-sides > colgroup + * > :first-child > * { font-size: 1em; } -/* Asciidoc admonition tip/note blocks */ +/* Asciidoc admonition tip/note blocks + + When adoc icons attribute is set to fonts, example rendering: + +
+ + + + + + + +
+ + + Warning to the wise. +
+
+*/ .asciidoc .admonitionblock { padding: 1rem; @@ -332,10 +350,19 @@ table.frame-sides > colgroup + * > :first-child > * { .asciidoc .admonitionblock .icon { display: block; - text-transform: uppercase; font-size: 0.8rem; +} + +.asciidoc .admonitionblock .icon i { + text-transform: uppercase; color: #777; font-weight: 600; + font-style: normal; + height: 1em; +} + +.asciidoc .admonitionblock .icon i:after { + content: attr(title); } .asciidoc .admonitionblock table tr td { @@ -366,6 +393,70 @@ table.frame-sides > colgroup + * > :first-child > * { border-color: #ff725c; /** tachyons light-red **/ } +/* + * Callout numbers and lists + */ + +.asciidoc .literalblock + .colist, +.listingblock + .colist { + margin-top: -0.5em; +} + +.asciidoc .colist td:not([class]):first-child { + padding: 0.4em 0.75em 0; + line-height: 1; + vertical-align: top; +} + +.asciidoc .colist td:not([class]):first-child img { + max-width: none; +} + +.asciidoc .colist td:not([class]):last-child { + padding: 0.25em 0; +} + +.asciidoc .conum[data-value] { + display: inline-block; + color: #fff !important; + background: rgb(0 0 0 / 0.8); + border-radius: 50%; + text-align: center; + font-size: 0.75em; + width: 1.67em; + height: 1.67em; + line-height: 1.67em; + font-family: "SFMono-Regular", Consolas, "Liberation Mono", Menlo, Courier, + monospace; + font-style: normal; + font-weight: bold; +} + +.asciidoc .conum[data-value] * { + color: #fff !important; +} + +.asciidoc .conum[data-value] + b { + display: none; +} + +.asciidoc .conum[data-value]::after { + content: attr(data-value); +} + +.asciidoc pre .conum[data-value] { + position: relative; + top: -0.125em; +} + +.asciidoc b.conum * { + color: inherit !important; +} + +.asciidoc .conum:not([data-value]):empty { + display: none; +} + /* * Scroll Indicator */ diff --git a/src/cljdoc/render/layout.clj b/src/cljdoc/render/layout.clj index 36328e75a..2147c97cf 100644 --- a/src/cljdoc/render/layout.clj +++ b/src/cljdoc/render/layout.clj @@ -14,7 +14,7 @@ [:script (hiccup/raw "hljs.registerLanguage('cljs', function (hljs) { return hljs.getLanguage('clj') }); - hljs.highlightAll();")]) + hljs.highlightAll();")]) (defn highlight-js [] [:div diff --git a/src/cljdoc/render/rich_text.clj b/src/cljdoc/render/rich_text.clj index 3e17f41ea..b50f744e7 100644 --- a/src/cljdoc/render/rich_text.clj +++ b/src/cljdoc/render/rich_text.clj @@ -20,6 +20,7 @@ (defn asciidoc-to-html [^String file-content] (let [opts (doto (Options.) (.setAttributes (java.util.HashMap. {"env-cljdoc" true + "icons" "font" "outfilesuffix" ".adoc" "showtitle" true})))] (-> (.convert adoc-container file-content opts) diff --git a/src/cljdoc/render/sanitize.clj b/src/cljdoc/render/sanitize.clj index 93cca1a71..e7aff84de 100644 --- a/src/cljdoc/render/sanitize.clj +++ b/src/cljdoc/render/sanitize.clj @@ -203,6 +203,10 @@ (matching-vals "wikilink") (on-tags "a") + ;; for code block callouts + (allow-attributes "data-value") + (on-tags "i") + ;; mimic from github pipeline (allow-attributes "itemscope" "itemtype") (on-tags "div") @@ -334,6 +338,11 @@ ["float"]) (on-tags "h2" "h3" "h4" "h5" "h6") + ;; for callout numbers and and potentially icons on admonitions + (sanitize-classes + ["conum" "icon-important" "icon-warning" "icon-caution" "icon-tip" "icon-note"]) + (on-tags "i") + (sanitize-classes ["arabic"] ["decimal"]