Manual highlighting webhelp (#2079)

* Add manual code highlighting

* Fix test

* Add kotlinAsJava highlighting

* Add runtime highlighting via Prism

* Add copy-button for code block

* Add tests and refactor

* Replace `<br>` for prism.js

* Parse trivial default values

Co-authored-by: Marcin Aman <marcin.aman@gmail.com>

2 files changed, 99 insertions, 5 deletions

diff --git a/plugins/base/src/main/resources/dokka/styles/prism.css b/plugins/base/src/main/resources/dokka/styles/prism.css
new file mode 100644
index 00000000..62ade383
--- /dev/null
+++ b/plugins/base/src/main/resources/dokka/styles/prism.css
@@ -0,0 +1,92 @@
+code .token {
+    white-space: pre-line;
+}
+
+/* PrismJS 1.24.1
+https://prismjs.com/download.html#themes=prism&languages=clike+java+javadoclike+kotlin&plugins=keep-markup */
+/**
+ * prism.js default theme for JavaScript, CSS and HTML
+ * Based on dabblet (http://dabblet.com)
+ * @author Lea Verou
+ */
+
+.token.comment,
+.token.prolog,
+.token.doctype,
+.token.cdata {
+	color: slategray;
+}
+
+.token.punctuation {
+	color: #999;
+}
+
+.token.namespace {
+	opacity: .7;
+}
+
+.token.property,
+.token.tag,
+.token.boolean,
+.token.number,
+.token.constant,
+.token.symbol,
+.token.deleted {
+	color: #905;
+}
+
+.token.selector,
+.token.attr-name,
+.token.string,
+.token.char,
+.token.builtin,
+.token.annotation,
+.token.inserted {
+	color: #690;
+}
+
+.token.operator,
+.token.entity,
+.token.url,
+.language-css .token.string,
+.style .token.string {
+	color: #9a6e3a;
+	/* This background color was intended by the author of this theme. */
+	background: hsla(0, 0%, 100%, .5);
+}
+
+.token.atrule,
+.token.attr-value,
+.token.keyword {
+	color: #07a;
+	font-size: inherit; /* to override .keyword */
+}
+
+.token.function,
+.token.class-name {
+	color: #DD4A68;
+}
+
+.token.regex,
+.token.important,
+.token.variable {
+	color: #e90;
+}
+
+.token.important,
+.token.bold {
+	font-weight: bold;
+}
+.token.italic {
+	font-style: italic;
+}
+
+.token.entity {
+	cursor: help;
+}
+
+.annotation,.control,.field,.filename,.keyword,.menupath,.property,.string,.value {
+	color: #27282c;
+	color: var(--wh-color-text-bold);
+	font-weight: 700;
+}
\ No newline at end of file
diff --git a/plugins/base/src/main/resources/dokka/styles/style.css b/plugins/base/src/main/resources/dokka/styles/style.css
index b9d22c3d..7a2dfae0 100644
--- a/plugins/base/src/main/resources/dokka/styles/style.css
+++ b/plugins/base/src/main/resources/dokka/styles/style.css
@@ -276,6 +276,7 @@ html ::-webkit-scrollbar-thumb {
 }
 
 .sample-container, div.CodeMirror {
+    position: relative;
     display: flex;
     flex-direction: column;
 }
@@ -315,6 +316,7 @@ code.paragraph {
     padding: 12px 32px 12px 12px;
     border-radius: 8px;
     line-height: 24px;
+    position: relative;
 }
 
 .symbol > a {
@@ -325,15 +327,15 @@ code.paragraph {
     cursor: pointer;
 }
 
-.symbol span.copy-icon {
+.symbol span.copy-icon, .sample-container span.copy-icon {
     display: none;
 }
 
-.symbol:hover span.copy-icon {
+.symbol:hover span.copy-icon, .sample-container:hover span.copy-icon {
     display: inline-block;
 }
 
-.symbol span.copy-icon::before {
+.symbol span.copy-icon::before, .sample-container span.copy-icon::before {
     width: 24px;
     height: 24px;
     display: inline-block;
@@ -346,7 +348,7 @@ code.paragraph {
     background-color: var(--secondary-text-color);
 }
 
-.symbol span.copy-icon:hover::before {
+.symbol span.copy-icon:hover::before, .sample-container span.copy-icon:hover::before {
     background-color: var(--color-dark);
 }
 
@@ -394,7 +396,7 @@ code.paragraph {
     padding-right: 14px;
 }
 
-.symbol .top-right-position {
+.symbol .top-right-position, .sample-container .top-right-position {
     /* it is important for a parent to have a position: relative */
     position: absolute;
     top: 8px;