Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Update prism.js to match new webhelp highlight colors #2670

Merged
merged 5 commits into from Sep 20, 2022
Merged

Update prism.js to match new webhelp highlight colors #2670

Show file tree
Hide file tree
Changes from 4 commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
58115e7
Update `prism.js` to match new webhelp highlight colors
IgnatBeresnev Sep 14, 2022
3dbd332
Collapse multiple `TokenStyle` elements into a single span
IgnatBeresnev Sep 14, 2022
c20cf46
Remove `code` and `pre` styling copied from webhelp
IgnatBeresnev Sep 19, 2022
25a52c6
Downgrade prism.js to avoid incorrect inline comment parsing
IgnatBeresnev Sep 19, 2022
c3b5fe8
Upgrade prism.js and add hook, add `builtin` token only for Html format
IgnatBeresnev Sep 19, 2022
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Jump to
Jump to file
Failed to load files.
Diff view
Diff view
9 changes: 8 additions & 1 deletion plugins/base/src/main/kotlin/renderers/html/HtmlRenderer.kt
View file
Open in desktop
Expand Up @@ -772,6 +772,14 @@ open class HtmlRenderer(
consumer.onTagContentEntity(Entities.nbsp)
buildText(textNode, unappliedStyles - TextStyle.Indented)
}
unappliedStyles.any { it is TokenStyle } -> {
val tokenStyles = unappliedStyles.filterIsInstance<TokenStyle>().toSet()
val tokenStyleClasses = tokenStyles.joinToString(separator = " ") { it.toString().toLowerCase() }
span("token $tokenStyleClasses") {
val hasMoreStyles = unappliedStyles.size > tokenStyles.size
if (hasMoreStyles) buildText(textNode, unappliedStyles - tokenStyles) else text(textNode.text)
}
}
unappliedStyles.isNotEmpty() -> {
val styleToApply = unappliedStyles.first()
applyStyle(styleToApply) {
Expand All @@ -792,7 +800,6 @@ open class HtmlRenderer(
TextStyle.Strong -> strong { body() }
TextStyle.Var -> htmlVar { body() }
TextStyle.Underlined -> underline { body() }
is TokenStyle -> span("token " + styleToApply.toString().toLowerCase()) { body() }
Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Previously, if a text element had >2 TokenStyle styles, it was rendered as

span("token first") {
    span("token second") {
        text
    }
}

else -> body()
}
}
Expand Down
11 changes: 7 additions & 4 deletions plugins/base/src/main/kotlin/signatures/JvmSignatureUtils.kt
View file
Open in desktop
Expand Up @@ -82,12 +82,15 @@ interface JvmSignatureUtils {

when (renderAtStrategy) {
is All, is OnlyOnce -> {
// Prism.js parser adds Builtin token instead of Annotation
// for some reason, so we also add it for consistency.
val annotationStyles = setOf(TokenStyle.Annotation, TokenStyle.Builtin)
when(a.scope) {
Annotations.AnnotationScope.GETTER -> text("@get:", styles = mainStyles + TokenStyle.Annotation)
Annotations.AnnotationScope.SETTER -> text("@set:", styles = mainStyles + TokenStyle.Annotation)
else -> text("@", styles = mainStyles + TokenStyle.Annotation)
Annotations.AnnotationScope.GETTER -> text("@get:", styles = mainStyles + annotationStyles)
Annotations.AnnotationScope.SETTER -> text("@set:", styles = mainStyles + annotationStyles)
else -> text("@", styles = mainStyles + annotationStyles)
}
link(a.dri.classNames!!, a.dri, styles = mainStyles + TokenStyle.Annotation)
link(a.dri.classNames!!, a.dri, styles = mainStyles + annotationStyles)
}
is Never -> link(a.dri.classNames!!, a.dri)
}
Expand Down
168 changes: 139 additions & 29 deletions plugins/base/src/main/resources/dokka/styles/prism.css
View file
Open in desktop
@@ -1,23 +1,22 @@
:root {
--keyword-color: #07a;
--property-color: #905;
--function-color: #DD4A68;
}

:root.theme-dark {
--keyword-color: #cc7832;
--property-color: #9876aa;
--function-color: #ffc66d;
}

/*
* Custom Dokka styles
*/
code .token {
white-space: pre;
}

/* 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
* Styles based on webhelp's prism.js styles
* Changes:
* - Since webhelp's styles are in .pcss, they use nesting which is not achievable in native CSS
* so nested css blocks have been unrolled (like dark theme).
* - Webhelp uses "Custom Class" prism.js plugin, so all of their prism classes are prefixed with "--prism".
* Dokka doesn't seem to need this plugin at the moment, so all "--prism" prefixes have been removed.
* - Removed all styles related to `pre` and `code` tags. Kotlinlang's resulting styles are so spread out and complicated
* that it's difficult to gather in one place. Instead use code styles defined in the main Dokka styles,
* which at the moment looks fairly similar.
*
* Based on prism.js default theme
* Based on dabblet (http://dabblet.com)
* @author Lea Verou
*/
Expand All @@ -26,15 +25,15 @@ https://prismjs.com/download.html#themes=prism&languages=clike+java+javadoclike+
.token.prolog,
.token.doctype,
.token.cdata {
color: slategray;
color: #8c8c8c;
}

.token.punctuation {
color: #999;
}

.token.namespace {
opacity: .7;
opacity: 0.7;
}

.token.property,
Expand All @@ -44,17 +43,16 @@ https://prismjs.com/download.html#themes=prism&languages=clike+java+javadoclike+
.token.constant,
.token.symbol,
.token.deleted {
color: var(--property-color);
color: #871094;
}

.token.selector,
.token.attr-name,
.token.string,
.token.char,
.token.builtin,
.token.annotation,
.token.inserted {
color: #690;
color: #067d17;
}

.token.operator,
Expand All @@ -64,25 +62,28 @@ https://prismjs.com/download.html#themes=prism&languages=clike+java+javadoclike+
.style .token.string {
color: #9a6e3a;
/* This background color was intended by the author of this theme. */
/*background: hsla(0, 0%, 100%, .5);*/
background: hsla(0, 0%, 100%, 0.5);
}

.token.atrule,
.token.attr-value,
.token.keyword {
color: var(--keyword-color);
vmishenev marked this conversation as resolved.
Show resolved Hide resolved
font-size: inherit; /* to override .keyword */
color: #0033b3;
}

.token.function {
color: #00627a;
}

.token.function,
.token.class-name {
color: var(--function-color);
color: #000000;
}

.token.regex,
.token.important,
.token.variable {
color: #e90;
color: #871094;
}

.token.important,
Expand All @@ -97,7 +98,116 @@ https://prismjs.com/download.html#themes=prism&languages=clike+java+javadoclike+
cursor: help;
}

.annotation,.control,.field,.filename,.keyword,.menupath,.property,.string,.value {
color: #27282c;
font-weight: 700;
}
.token.operator {
background: none;
}

/*
* DARK THEME
*/
:root.theme-dark .token.comment,
:root.theme-dark .token.prolog,
:root.theme-dark .token.cdata {
color: #808080;
}

:root.theme-dark .token.delimiter,
:root.theme-dark .token.boolean,
:root.theme-dark .token.keyword,
:root.theme-dark .token.selector,
:root.theme-dark .token.important,
:root.theme-dark .token.atrule {
color: #cc7832;
}

:root.theme-dark .token.operator,
:root.theme-dark .token.punctuation,
:root.theme-dark .token.attr-name {
color: #a9b7c6;
}

:root.theme-dark .token.tag,
:root.theme-dark .token.tag .punctuation,
:root.theme-dark .token.doctype,
:root.theme-dark .token.builtin {
color: #e8bf6a;
}

:root.theme-dark .token.entity,
:root.theme-dark .token.number,
:root.theme-dark .token.symbol {
color: #6897bb;
}

:root.theme-dark .token.property,
:root.theme-dark .token.constant,
:root.theme-dark .token.variable {
color: #9876aa;
}

:root.theme-dark .token.string,
:root.theme-dark .token.char {
color: #6a8759;
}

:root.theme-dark .token.attr-value,
:root.theme-dark .token.attr-value .punctuation {
color: #a5c261;
}

:root.theme-dark .token.attr-value .punctuation:first-child {
color: #a9b7c6;
}

:root.theme-dark .token.url {
text-decoration: underline;

color: #287bde;
background: transparent;
}

:root.theme-dark .token.function {
color: #ffc66d;
}

:root.theme-dark .token.regex {
background: #364135;
}

:root.theme-dark .token.deleted {
background: #484a4a;
}

:root.theme-dark .token.inserted {
background: #294436;
}

:root.theme-dark .token.class-name {
color: #a9b7c6;
}

:root.theme-dark .token.function {
color: #ffc66d;
}

:root.theme-darkcode .language-css .token.property,
:root.theme-darkcode .language-css,
:root.theme-dark .token.property + .token.punctuation {
color: #a9b7c6;
}

code.language-css .token.id {
color: #ffc66d;
}

:root.theme-dark code.language-css .token.selector > .token.class,
:root.theme-dark code.language-css .token.selector > .token.attribute,
:root.theme-dark code.language-css .token.selector > .token.pseudo-class,
:root.theme-dark code.language-css .token.selector > .token.pseudo-element {
color: #ffc66d;
}

:root.theme-dark .language-plaintext .token {
/* plaintext code should be colored as article text */
color: inherit !important;
}
7 changes: 4 additions & 3 deletions plugins/base/src/test/kotlin/content/HighlightingTest.kt
View file
Open in desktop
Expand Up @@ -71,9 +71,10 @@ class HighlightingTest : BaseAbstractTest() {
assertTrue(children?.get(it.first)?.style?.contains(it.second) == true)
val annotation = children?.first()?.children?.first()

assertTrue(annotation?.children?.get(0)?.style?.contains(TokenStyle.Annotation) == true)
assertTrue(annotation?.children?.get(1)?.children?.first()?.style?.contains(TokenStyle.Annotation) == true)
val annotationStyles = setOf(TokenStyle.Annotation, TokenStyle.Builtin)
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

What does TokenStyle.Builtin mean?
I am not sure the output-specific problem should be fixed here, in the content model rather than in the render stage.

Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

What does TokenStyle.Builtin mean?

It's a good question, you were the one that added the type :) It was already in Public API, so I just used it.

I am not sure the output-specific problem should be fixed here, in the content model rather than in the render stage.

Sure, I can fix it for html-only, but let's then delete TokenStyle.Builtin entry so there's no confusion?

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

It's a good question, you were the one that added the type :) It was already in Public API, so I just used it.

I hoped somebody tells me what it means)
You can remove it since it is not used anywhere.

assertTrue(annotation?.children?.get(0)?.style?.containsAll(annotationStyles) == true)
assertTrue(annotation?.children?.get(1)?.children?.first()?.style?.containsAll(annotationStyles) == true)
}
}
}
}
}