@apify/docs-theme 1.0.20 → 1.0.21

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@apify/docs-theme",
-  "version": "1.0.20",
+  "version": "1.0.21",
   "description": "",
   "main": "./src/index.js",
   "files": [
@@ -19,8 +19,10 @@
     "@docusaurus/theme-common": "^2.2.0",
     "@vcarl/remark-headings": "^0.1.0",
     "babel-loader": "^9.1.0",
+    "highlight.js": "^11.7.0",
     "prism-react-renderer": "^1.3.5",
     "react-markdown": "^8.0.4",
+    "rehype-highlight": "^6.0.0",
     "remark-parse": "^10.0.1",
     "remark-slug": "^7.0.1",
     "remark-stringify": "^10.0.2",

package/src/pages/ChangelogPage.jsx

@@ -11,6 +11,8 @@ import remarkSlug from 'remark-slug';
 import remarkParse from 'remark-parse';
 import remarkStringify from 'remark-stringify';
 import remarkHeadings from '@vcarl/remark-headings';
+import rehypeHighlight from 'rehype-highlight';
+import dockerfile from 'highlight.js/lib/languages/dockerfile';
 
 export default function ChangelogPage({ changelog }) {
     const windowSize = useWindowSize();
@@ -41,21 +43,30 @@ function ChangelogPageDesktop({ changelog, toc }) {
             title={`Changelog · ${siteConfig.tagline}`}
             description={siteConfig.tagline}
         >
-            <div className='col apiItemCol' style={{ margin: 'auto', display: 'flex', flexDirection: 'row' }}>
-                <div style={{ flexDirection: 'column' }} className='theme-doc-markdown markdown'>
-                    <ReactMarkdown
-                        remarkPlugins={[remarkSlug]}
-                    >
-                        {changelog}
-                    </ReactMarkdown>
-                </div>
-                <div style={{ width: '50%' }}>
-                    <TOC
-                        {...{
-                            toc,
-                            minHeadingLevel: 1,
-                        }}
-                    />
+            <div className='docPage docMainContainer' style={{ margin: 'auto' }}>
+                <div className="row" style={{ flexWrap: 'nowrap' }}>
+                    <div style={{ flexDirection: 'column' }} className='theme-doc-markdown markdown col--9'>
+                        <ReactMarkdown
+                            remarkPlugins={[remarkSlug]}
+                            rehypePlugins={[
+                                [rehypeHighlight,
+                                    {
+                                        languages: { dockerfile },
+                                        ignoreMissing: true,
+                                    },
+                                ]]}
+                        >
+                            {changelog}
+                        </ReactMarkdown>
+                    </div>
+                    <div className="col--3">
+                        <TOC
+                            {...{
+                                toc,
+                                minHeadingLevel: 1,
+                            }}
+                        />
+                    </div>
                 </div>
             </div>
         </Layout>

package/src/theme/custom.css

@@ -591,3 +591,27 @@ html[data-theme='dark'] .actionLink:hover::after {
     background-image: url('/img/arrow-right-primary.svg');
     margin-left: 8px;
 }
+
+
+pre code.hljs{display:block;overflow-x:auto;padding:1em}code.hljs{padding:3px 5px}/*!
+  Theme: GitHub
+  Description: Light theme as seen on github.com
+  Author: github.com
+  Maintainer: @Hirse
+  Updated: 2021-05-15
+
+  Outdated base version: https://github.com/primer/github-syntax-light
+  Current colors taken from GitHub's CSS
+*/
+.hljs{color:#24292e;background:#fff}.hljs-doctag,.hljs-keyword,.hljs-meta .hljs-keyword,.hljs-template-tag,.hljs-template-variable,.hljs-type,.hljs-variable.language_{color:#d73a49}.hljs-title,.hljs-title.class_,.hljs-title.class_.inherited__,.hljs-title.function_{color:#6f42c1}.hljs-attr,.hljs-attribute,.hljs-literal,.hljs-meta,.hljs-number,.hljs-operator,.hljs-selector-attr,.hljs-selector-class,.hljs-selector-id,.hljs-variable{color:#005cc5}.hljs-meta .hljs-string,.hljs-regexp,.hljs-string{color:#032f62}.hljs-built_in,.hljs-symbol{color:#e36209}.hljs-code,.hljs-comment,.hljs-formula{color:#6a737d}.hljs-name,.hljs-quote,.hljs-selector-pseudo,.hljs-selector-tag{color:#22863a}.hljs-subst{color:#24292e}.hljs-section{color:#005cc5;font-weight:700}.hljs-bullet{color:#735c0f}.hljs-emphasis{color:#24292e;font-style:italic}.hljs-strong{color:#24292e;font-weight:700}.hljs-addition{color:#22863a;background-color:#f0fff4}.hljs-deletion{color:#b31d28;background-color:#ffeef0}
+ 
+ /*!
+  Theme: GitHub Dark Dimmed
+  Description: Dark dimmed theme as seen on github.com
+  Author: github.com
+  Maintainer: @Hirse
+  Updated: 2021-05-15
+
+  Colors taken from GitHub's CSS
+*/
+html[data-theme="dark"] .hljs{color:#adbac7;background:#22272e}html[data-theme="dark"] .hljs-doctag,html[data-theme="dark"] .hljs-keyword,html[data-theme="dark"] .hljs-meta .hljs-keyword,html[data-theme="dark"] .hljs-template-tag,html[data-theme="dark"] .hljs-template-variable,html[data-theme="dark"] .hljs-type,html[data-theme="dark"] .hljs-variable.language_{color:#f47067}html[data-theme="dark"] .hljs-title,html[data-theme="dark"] .hljs-title.class_,html[data-theme="dark"] .hljs-title.class_.inherited__,html[data-theme="dark"] .hljs-title.function_{color:#dcbdfb}html[data-theme="dark"] .hljs-attr,html[data-theme="dark"] .hljs-attribute,html[data-theme="dark"] .hljs-literal,html[data-theme="dark"] .hljs-meta,html[data-theme="dark"] .hljs-number,html[data-theme="dark"] .hljs-operator,html[data-theme="dark"] .hljs-selector-attr,html[data-theme="dark"] .hljs-selector-class,html[data-theme="dark"] .hljs-selector-id,html[data-theme="dark"] .hljs-variable{color:#6cb6ff}html[data-theme="dark"] .hljs-meta .hljs-string,html[data-theme="dark"] .hljs-regexp,html[data-theme="dark"] .hljs-string{color:#96d0ff}html[data-theme="dark"] .hljs-built_in,html[data-theme="dark"] .hljs-symbol{color:#f69d50}html[data-theme="dark"] .hljs-code,html[data-theme="dark"] .hljs-comment,html[data-theme="dark"] .hljs-formula{color:#768390}html[data-theme="dark"] .hljs-name,html[data-theme="dark"] .hljs-quote,html[data-theme="dark"] .hljs-selector-pseudo,html[data-theme="dark"] .hljs-selector-tag{color:#8ddb8c}html[data-theme="dark"] .hljs-subst{color:#adbac7}html[data-theme="dark"] .hljs-section{color:#316dca;font-weight:700}html[data-theme="dark"] .hljs-bullet{color:#eac55f}html[data-theme="dark"] .hljs-emphasis{color:#adbac7;font-style:italic}html[data-theme="dark"] .hljs-strong{color:#adbac7;font-weight:700}html[data-theme="dark"] .hljs-addition{color:#b4f1b4;background-color:#1b4721}html[data-theme="dark"] .hljs-deletion{color:#ffd8d3;background-color:#78191b}

package/src/theme.js

@@ -20,6 +20,9 @@ function theme(
 ) {
     return {
         name: '@apify/docs-theme',
+        getPathsToWatch() {
+            return ['./pages'];
+        },
         getThemePath() {
             return '../src/theme';
         },