Fix highlights style in docs (#145)
diff --git a/landing-pages/site/assets/scss/_highlights.scss b/landing-pages/site/assets/scss/_highlights.scss
new file mode 100644
index 0000000..3840a67
--- /dev/null
+++ b/landing-pages/site/assets/scss/_highlights.scss
@@ -0,0 +1,97 @@
+/**
+ * Licensed to the Apache Software Foundation (ASF) under one
+ * or more contributor license agreements. See the NOTICE file
+ * distributed with this work for additional information
+ * regarding copyright ownership. The ASF licenses this file
+ * to you under the Apache License, Version 2.0 (the
+ * "License"); you may not use this file except in compliance
+ * with the License. You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ * KIND, either express or implied. See the License for the
+ * specific language governing permissions and limitations
+ * under the License.
+ */
+@import "colors";
+
+.chroma, .highlight {
+ background-color: #ffffff;
+
+ .lntd {
+ vertical-align: top;
+ padding: 0;
+ margin: 0;
+ border: 0;
+ }
+
+ .lntable {
+ border-spacing: 0;
+ padding: 0;
+ margin: 0;
+ border: 0;
+ width: auto;
+ overflow: auto;
+ display: block;
+ }
+
+ .hl {
+ display: block;
+ width: 100%;
+ background-color: #ffffcc;
+ }
+
+ .lnt, .ln {
+ margin-right: 0.4em;
+ padding: 0 0.4em 0 0.4em;
+ color: #7f7f7f;
+ }
+
+ .k, .kc, .kd, .kn, .kp, .kr {
+ color: #0000ff;
+ }
+
+ .kt, .nc {
+ color: #2b91af;
+ }
+
+ .s, .sa, .sb, .sc, .dl, .sd, .s2, .se, .sh, .si, .sx, .sr, .s1, .ss {
+ color: #a31515;
+ }
+
+ .ow {
+ color: #0000ff;
+ }
+
+ .c, .ch, .cm, .c1, .cs {
+ color: #008000;
+ }
+
+ .cp, .cpf {
+ color: #0000ff;
+ }
+
+ .ge {
+ font-style: italic;
+ }
+
+ .gh, .gp, .gs, .gu {
+ font-weight: bold;
+ }
+}
+
+pre {
+ margin: 40px 0;
+ padding: 16px 20px;
+ border: solid 1px map-get($colors, very-light-pink);
+ border-radius: 5px;
+ width: fit-content;
+ max-width: 100%;
+
+ span {
+ @extend .monotext--brownish-grey;
+ }
+}
diff --git a/landing-pages/site/assets/scss/_markdown-content.scss b/landing-pages/site/assets/scss/_markdown-content.scss
index 5d9bd32..6eda9f9 100644
--- a/landing-pages/site/assets/scss/_markdown-content.scss
+++ b/landing-pages/site/assets/scss/_markdown-content.scss
@@ -17,8 +17,6 @@
* under the License.
*/
-@import "colors";
-
.markdown-content {
h1, h2, h3, h4, h5 {
@extend .subtitle__large--greyish-brown;
@@ -31,17 +29,7 @@
margin-bottom: 30px;
}
- pre {
- margin: 40px 0;
- padding: 16px 20px;
- background-color: transparent !important;
- border: solid 1px map-get($colors, very-light-pink);
- border-radius: 5px;
- width: fit-content;
- max-width: 100%;
-
- span {
- @extend .monotext--brownish-grey;
- }
+ pre span {
+ @extend .monotext--brownish-grey;
}
}
diff --git a/landing-pages/site/assets/scss/_rst-content.scss b/landing-pages/site/assets/scss/_rst-content.scss
index 8b31684..98ef829 100644
--- a/landing-pages/site/assets/scss/_rst-content.scss
+++ b/landing-pages/site/assets/scss/_rst-content.scss
@@ -68,15 +68,11 @@
}
code {
- white-space: nowrap;
max-width: 100%;
- background: #fff;
- border: solid 1px #e1e4e5;
- font-size: 75%;
+ color: #51504f;
padding: 0 5px;
font-family: 'Roboto Mono', monospace;
- color: #E74C3C;
- overflow-x: auto
+ overflow-x: auto;
}
.note, .attention, .caution, .danger, .error, .hint, .important, .tip, .warning, .admonition-todo, .admonition {
@@ -240,39 +236,11 @@
margin-bottom: 24px
}
- div[class^='highlight'] {
- border: 1px solid #e1e4e5;
- border-radius: 5px;
- overflow-x: auto;
- margin: 1px 0 24px 0;
+ pre {
background-color: #f2f8fe;
}
- div[class^='highlight'] div[class^='highlight'] {
- padding: 0;
- border: none;
- margin: 0
- }
-
- div[class^='highlight'] td.code {
- width: 100%
- }
-
- div[class^='highlight'] pre {
- white-space: pre;
- margin: 0;
- padding: 12px 12px;
- display: block;
- overflow: auto
- }
-
- div[class^='highlight'] pre .hll {
- display: block;
- margin: 0 -12px;
- padding: 0 12px
- }
-
- pre.literal-block, div[class^='highlight'] pre, .linenodiv pre {
+ pre.literal-block, .linenodiv pre {
font-family: 'Roboto Mono', monospace;
font-size: 12px;
line-height: 1.4
@@ -427,12 +395,6 @@
white-space: nowrap
}
- code {
- color: #51504f;
- font-family: 'Roboto Mono', monospace;
- padding: 2px 5px
- }
-
code big, tt em, code em {
font-size: 100% !important;
line-height: normal
@@ -576,7 +538,9 @@
margin-bottom: 0;
}
- .example-header ~ div[class^='highlight'] {
+ .example-block-wrapper pre {
+ margin: 0;
+ width: unset;
border-top-left-radius: 0;
border-top-right-radius: 0;
}
diff --git a/landing-pages/site/assets/scss/main-custom.scss b/landing-pages/site/assets/scss/main-custom.scss
index 7b06c2a..30f9c4a 100644
--- a/landing-pages/site/assets/scss/main-custom.scss
+++ b/landing-pages/site/assets/scss/main-custom.scss
@@ -47,6 +47,6 @@
@import "search";
@import "rating";
@import "rst-content";
-@import "pygments";
@import "content-drawer";
@import "dropdown";
+@import "highlights";
diff --git a/landing-pages/site/config.toml b/landing-pages/site/config.toml
index fa49bc3..572ee18 100644
--- a/landing-pages/site/config.toml
+++ b/landing-pages/site/config.toml
@@ -34,6 +34,7 @@
enableMissingTranslationPlaceholders = true
pygmentsStyle = "vs"
+pygmentsUseClasses = true
## Configuration for BlackFriday markdown parser: https://github.com/russross/blackfriday
[blackfriday]
diff --git a/landing-pages/site/content/en/roadmap/_index.md b/landing-pages/site/content/en/roadmap/_index.md
index f451d7f..9f5856e 100644
--- a/landing-pages/site/content/en/roadmap/_index.md
+++ b/landing-pages/site/content/en/roadmap/_index.md
@@ -53,11 +53,11 @@
// Synchronize user data and set up
var currentUser = new Talk.User({
id: 79302, // user id
- name: “George Looney”, // full name
- email: “george@looney.net” // for offline email fallback
+ name: "George Looney", // full name
+ email: "george@looney.net" // for offline email fallback
});
var session = new Talk.Session({
- appId: “9352938974”, // your TalkJS account id
+ appId: "9352938974", // your TalkJS account id
me: currentUser // make George the active user
});
{{< /highlight >}}
