Skip to content

Add dark style for fenced code blocks #1355

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

Merged
ang-zeyu merged 19 commits into from
Oct 4, 2020
Merged

Add dark style for fenced code blocks #1355

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
19 commits
Select commit Hold shift + click to select a range
6f4cce1
Change default code presentation to dark mode
ryoarmanda Sep 15, 2020
5e16b12
Update tests
ryoarmanda Sep 15, 2020
f246379
Add config to switch highlight styles
ryoarmanda Sep 15, 2020
735db7a
Update tests
ryoarmanda Sep 15, 2020
e860755
Update docs to include highlightStyle config
ryoarmanda Sep 16, 2020
2ec3acb
Add site config for styling
ryoarmanda Sep 21, 2020
9a75903
Move highlight class addition to ComponentParser
ryoarmanda Sep 21, 2020
f0bdcb3
Remove unnecessary CSS
ryoarmanda Sep 21, 2020
24b9353
Fix ComponentParser construction
ryoarmanda Sep 21, 2020
4b08f36
Change theme-specific styling approach
ryoarmanda Sep 29, 2020
bc2edd4
Remove unnecessary passing of style object
ryoarmanda Sep 29, 2020
da1aa04
Merge branch 'master' into code-fence-dark-mode
ryoarmanda Sep 29, 2020
37fef03
Fix light style background
ryoarmanda Sep 29, 2020
a654d20
Fix tests
ryoarmanda Sep 29, 2020
7b531b7
Add styling for inline code with no language
ryoarmanda Sep 29, 2020
7383939
Address review
ryoarmanda Sep 29, 2020
146f2a1
Add no-lang class to detect inline no-language styling
ryoarmanda Oct 4, 2020
89bf5a3
Rename CSS files
ryoarmanda Oct 4, 2020
557e9c1
Place additional styles on a new line
ryoarmanda Oct 4, 2020
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
10 changes: 10 additions & 0 deletions docs/userGuide/siteJsonFile.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -19,6 +19,9 @@ Here is a typical `site.json` file:
"faviconPath": "myfavicon.png",
"titlePrefix": "FooBar Dev Docs",
"theme": "bootswatch-cerulean",
"style": {
"codeTheme": "light"
},
"pages": [
{
"src": "index.md",
Expand Down Expand Up @@ -97,6 +100,13 @@ Here is a typical `site.json` file:
_(Optional)_ **The theme for the generated site.** Uses the default Bootstrap theme if not specified. See [User Guide: Themes](themes.html) for more details.


#### **`style`**

_(Optional)_ **The styling options to be applied to the site.** This includes:

* **`codeTheme`** [Optional. Default: `"dark"`]<br>
The theme used for fenced code blocks. Accepts either `"light"` or `"dark"`.

#### **`pages`**

**An array of pages to be rendered.**
Expand Down
2 changes: 1 addition & 1 deletion packages/cli/test/functional/test_site/expected/bugs/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -13,7 +13,7 @@
<link rel="stylesheet" href="../markbind/fontawesome/css/all.min.css">
<link rel="stylesheet" href="../markbind/glyphicons/css/bootstrap-glyphicons.min.css">
<link rel="stylesheet" href="../markbind/css/octicons.css">
<link rel="stylesheet" href="../markbind/css/github.min.css">
<link rel="stylesheet" href="../markbind/css/codeblock-dark.min.css">
<link rel="stylesheet" href="../markbind/css/markbind.min.css">
<script src="../markbind/js/polyfill.min.js"></script>
<script src="../markbind/js/vue.min.js"></script>
Expand Down
8 changes: 4 additions & 4 deletions packages/cli/test/functional/test_site/expected/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -18,7 +18,7 @@
<link rel="stylesheet" href="markbind/fontawesome/css/all.min.css">
<link rel="stylesheet" href="markbind/glyphicons/css/bootstrap-glyphicons.min.css">
<link rel="stylesheet" href="markbind/css/octicons.css">
<link rel="stylesheet" href="markbind/css/github.min.css">
<link rel="stylesheet" href="markbind/css/codeblock-dark.min.css">
<link rel="stylesheet" href="markbind/css/markbind.min.css">
<script src="markbind/js/polyfill.min.js"></script>
<script src="markbind/js/vue.min.js"></script>
Expand Down Expand Up @@ -344,8 +344,8 @@ <h4 id="focus-groups"><span id="focus-groups" class="anchor"></span>Focus groups
<div name="Referencing specified path in boilerplate">
<h1 id="path-within-the-boilerplate-folder-is-separately-specified"><span id="path-within-the-boilerplate-folder-is-separately-specified" class="anchor"></span>Path within the boilerplate folder is separately specified<a class="fa fa-anchor" href="#path-within-the-boilerplate-folder-is-separately-specified" onclick="event.stopPropagation()"></a></h1>
<p>Like static include, pages within the site should be able to use files located in folders within boilerplate.</p>
<p>Also, the boilerplate file name (e.g. <code v-pre>inside.md</code>) and the file that it is supposed to act as (<code v-pre>notInside.md</code>) can be different.</p>
<p>This file should behaves as if it is in the <code v-pre>requirements</code> folder:</p>
<p>Also, the boilerplate file name (e.g. <code class="hljs inline no-lang" v-pre>inside.md</code>) and the file that it is supposed to act as (<code class="hljs inline no-lang" v-pre>notInside.md</code>) can be different.</p>
<p>This file should behaves as if it is in the <code class="hljs inline no-lang" v-pre>requirements</code> folder:</p>
<p>
<panel src="/test_site/requirements/NonFunctionalRequirements._include_.html"><template slot="header">
<p>Tested with the folllowing include</p>
Expand Down Expand Up @@ -374,7 +374,7 @@ <h1 id="path-within-the-boilerplate-folder-is-separately-specified"><span id="pa
<p><em>MarkBind supports .mbd files.</em></p>
</div>
<div>
<p><code v-pre>MarkBind supports .mbdf files.</code></p>
<p><code class="hljs inline no-lang" v-pre>MarkBind supports .mbdf files.</code></p>
</div>
<p><strong>Include from another Markbind site</strong></p>
<div>
Expand Down
2 changes: 2 additions & 0 deletions packages/cli/test/functional/test_site/expected/markbind/css/codeblock-dark.min.css
View file
Open in desktop

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

2 changes: 2 additions & 0 deletions packages/cli/test/functional/test_site/expected/markbind/css/codeblock-light.min.css
View file
Open in desktop

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

1 change: 0 additions & 1 deletion packages/cli/test/functional/test_site/expected/markbind/css/github.min.css
View file
Open in desktop

This file was deleted.

4 changes: 2 additions & 2 deletions packages/cli/test/functional/test_site/expected/requirements/UserStories._include_.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,13 +1,13 @@
<p>User stories are brief (typically, 1-3 sentences) descriptions of what the system can do for the users,
written in the customers’ language. Often, user stories are written by the customers themselves.</p>
<p>A commonly used format for writing user stories is:<br>
<strong><code v-pre>As a</code></strong> <code v-pre>&lt;use type/role&gt;</code> <strong><code v-pre>I can</code></strong> <code v-pre>&lt;function&gt;</code> <strong><code v-pre>so that</code></strong> <code v-pre>&lt;benefit&gt;</code></p>
<strong><code class="hljs inline no-lang" v-pre>As a</code></strong> <code class="hljs inline no-lang" v-pre>&lt;use type/role&gt;</code> <strong><code class="hljs inline no-lang" v-pre>I can</code></strong> <code class="hljs inline no-lang" v-pre>&lt;function&gt;</code> <strong><code class="hljs inline no-lang" v-pre>so that</code></strong> <code class="hljs inline no-lang" v-pre>&lt;benefit&gt;</code></p>
<p>Here are some examples of user stories for the IVLE system:</p>
<pre><code class="hljs bat" v-pre><span>* As a student, I can download files uploaded by lecturers, so that I can get my own <span class="hljs-built_in">copy</span> of the files.
</span><span>* As a lecturer, I can create discussion forums, so that students can discuss things online.
</span><span>* As a tutor, I can <span class="hljs-built_in">print</span> attendance sheets, so that I can take attendance during the class.
</span></code></pre>
<p>The <code v-pre>&lt;benefit&gt;</code> can be omitted if it is obvious. E.g. As a tutor, I can print attendance sheets.
<p>The <code class="hljs inline no-lang" v-pre>&lt;benefit&gt;</code> can be omitted if it is obvious. E.g. As a tutor, I can print attendance sheets.
User stories are mainly used for early estimation and scheduling purposes.</p>
<p>According to <ref xp-website>this<ref></ref>, the biggest difference between user stories and traditional requirements
specifications is in the level of detail. User stories should only provide enough detail to make a reasonably low risk
Expand Down
2 changes: 1 addition & 1 deletion packages/cli/test/functional/test_site/expected/sub_site/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -13,7 +13,7 @@
<link rel="stylesheet" href="../markbind/fontawesome/css/all.min.css">
<link rel="stylesheet" href="../markbind/glyphicons/css/bootstrap-glyphicons.min.css">
<link rel="stylesheet" href="../markbind/css/octicons.css">
<link rel="stylesheet" href="../markbind/css/github.min.css">
<link rel="stylesheet" href="../markbind/css/codeblock-dark.min.css">
<link rel="stylesheet" href="../markbind/css/markbind.min.css">
<script src="../markbind/js/polyfill.min.js"></script>
<script src="../markbind/js/vue.min.js"></script>
Expand Down
2 changes: 1 addition & 1 deletion packages/cli/test/functional/test_site/expected/sub_site/nested_sub_site/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -13,7 +13,7 @@
<link rel="stylesheet" href="../../markbind/fontawesome/css/all.min.css">
<link rel="stylesheet" href="../../markbind/glyphicons/css/bootstrap-glyphicons.min.css">
<link rel="stylesheet" href="../../markbind/css/octicons.css">
<link rel="stylesheet" href="../../markbind/css/github.min.css">
<link rel="stylesheet" href="../../markbind/css/codeblock-dark.min.css">
<link rel="stylesheet" href="../../markbind/css/markbind.min.css">
<script src="../../markbind/js/polyfill.min.js"></script>
<script src="../../markbind/js/vue.min.js"></script>
Expand Down
4 changes: 2 additions & 2 deletions ...est/functional/test_site/expected/sub_site/nested_sub_site/testNunjucksPathResolving.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -13,7 +13,7 @@
<link rel="stylesheet" href="../../markbind/fontawesome/css/all.min.css">
<link rel="stylesheet" href="../../markbind/glyphicons/css/bootstrap-glyphicons.min.css">
<link rel="stylesheet" href="../../markbind/css/octicons.css">
<link rel="stylesheet" href="../../markbind/css/github.min.css">
<link rel="stylesheet" href="../../markbind/css/codeblock-dark.min.css">
<link rel="stylesheet" href="../../markbind/css/markbind.min.css">
<script src="../../markbind/js/polyfill.min.js"></script>
<script src="../../markbind/js/vue.min.js"></script>
Expand All @@ -36,7 +36,7 @@
The root directory in this case is the respective root directory of the root site or sub sites.</p>
<hr>
<p><strong>Test {% include %}</strong></p>
<p>This is content from testNunjucksPathResolvingInclude.mbdf located at <code v-pre>sub_site/nested_sub_site</code></p>
<p>This is content from testNunjucksPathResolvingInclude.mbdf located at <code class="hljs inline no-lang" v-pre>sub_site/nested_sub_site</code></p>
<hr>
<p><strong>Test {% import %}</strong></p>
<p>variable to import</p>
Expand Down
4 changes: 2 additions & 2 deletions packages/cli/test/functional/test_site/expected/sub_site/testNunjucksPathResolving.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -13,7 +13,7 @@
<link rel="stylesheet" href="../markbind/fontawesome/css/all.min.css">
<link rel="stylesheet" href="../markbind/glyphicons/css/bootstrap-glyphicons.min.css">
<link rel="stylesheet" href="../markbind/css/octicons.css">
<link rel="stylesheet" href="../markbind/css/github.min.css">
<link rel="stylesheet" href="../markbind/css/codeblock-dark.min.css">
<link rel="stylesheet" href="../markbind/css/markbind.min.css">
<script src="../markbind/js/polyfill.min.js"></script>
<script src="../markbind/js/vue.min.js"></script>
Expand All @@ -36,7 +36,7 @@
The root directory in this case is the respective root directory of the root site or sub sites.</p>
<hr>
<p><strong>Test {% include %}</strong></p>
<p>This is content from testNunjucksPathResolvingInclude.mbdf located at <code v-pre>sub_site/nested_sub_site</code></p>
<p>This is content from testNunjucksPathResolvingInclude.mbdf located at <code class="hljs inline no-lang" v-pre>sub_site/nested_sub_site</code></p>
<hr>
<p><strong>Test {% import %}</strong></p>
<p>variable to import</p>
Expand Down
2 changes: 1 addition & 1 deletion packages/cli/test/functional/test_site/expected/testAfterSetup.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -13,7 +13,7 @@
<link rel="stylesheet" href="markbind/fontawesome/css/all.min.css">
<link rel="stylesheet" href="markbind/glyphicons/css/bootstrap-glyphicons.min.css">
<link rel="stylesheet" href="markbind/css/octicons.css">
<link rel="stylesheet" href="markbind/css/github.min.css">
<link rel="stylesheet" href="markbind/css/codeblock-dark.min.css">
<link rel="stylesheet" href="markbind/css/markbind.min.css">
<script src="markbind/js/polyfill.min.js"></script>
<script src="markbind/js/vue.min.js"></script>
Expand Down
2 changes: 1 addition & 1 deletion packages/cli/test/functional/test_site/expected/testAnchorGeneration.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -13,7 +13,7 @@
<link rel="stylesheet" href="markbind/fontawesome/css/all.min.css">
<link rel="stylesheet" href="markbind/glyphicons/css/bootstrap-glyphicons.min.css">
<link rel="stylesheet" href="markbind/css/octicons.css">
<link rel="stylesheet" href="markbind/css/github.min.css">
<link rel="stylesheet" href="markbind/css/codeblock-dark.min.css">
<link rel="stylesheet" href="markbind/css/markbind.min.css">
<script src="markbind/js/polyfill.min.js"></script>
<script src="markbind/js/vue.min.js"></script>
Expand Down
2 changes: 1 addition & 1 deletion packages/cli/test/functional/test_site/expected/testAntiFOUCStyles.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -13,7 +13,7 @@
<link rel="stylesheet" href="markbind/fontawesome/css/all.min.css">
<link rel="stylesheet" href="markbind/glyphicons/css/bootstrap-glyphicons.min.css">
<link rel="stylesheet" href="markbind/css/octicons.css">
<link rel="stylesheet" href="markbind/css/github.min.css">
<link rel="stylesheet" href="markbind/css/codeblock-dark.min.css">
<link rel="stylesheet" href="markbind/css/markbind.min.css">
<script src="markbind/js/polyfill.min.js"></script>
<script src="markbind/js/vue.min.js"></script>
Expand Down
12 changes: 6 additions & 6 deletions packages/cli/test/functional/test_site/expected/testCodeBlocks.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -13,7 +13,7 @@
<link rel="stylesheet" href="markbind/fontawesome/css/all.min.css">
<link rel="stylesheet" href="markbind/glyphicons/css/bootstrap-glyphicons.min.css">
<link rel="stylesheet" href="markbind/css/octicons.css">
<link rel="stylesheet" href="markbind/css/github.min.css">
<link rel="stylesheet" href="markbind/css/codeblock-dark.min.css">
<link rel="stylesheet" href="markbind/css/markbind.min.css">
<script src="markbind/js/polyfill.min.js"></script>
<script src="markbind/js/vue.min.js"></script>
Expand All @@ -39,16 +39,16 @@
</span><span> <span class="hljs-tag">&lt;<span class="hljs-name">bar</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"name"</span>&gt;</span>goo<span class="hljs-tag">&lt;/<span class="hljs-name">bar</span>&gt;</span>
</span><span><span class="hljs-tag">&lt;/<span class="hljs-name">foo</span>&gt;</span>
</span></code></pre>
<p><strong><code v-pre>no-line-numbers</code> attr should hide corresponding line numbers</strong></p>
<p><strong><code class="hljs inline no-lang" v-pre>no-line-numbers</code> attr should hide corresponding line numbers</strong></p>
<pre><code class="no-line-numbers hljs xml" v-pre><span><span class="hljs-tag">&lt;<span class="hljs-name">foo</span>&gt;</span>
</span><span> <span class="hljs-tag">&lt;<span class="hljs-name">bar</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"name"</span>&gt;</span>goo<span class="hljs-tag">&lt;/<span class="hljs-name">bar</span>&gt;</span>
</span><span><span class="hljs-tag">&lt;/<span class="hljs-name">foo</span>&gt;</span>
</span></code></pre>
<p><strong><code v-pre>start-from</code> attr should set inline css in <code v-pre>&lt;code&gt;</code> tag, enabling lines to start from a specific line number</strong></p>
<p><strong><code class="hljs inline no-lang" v-pre>start-from</code> attr should set inline css in <code class="hljs inline no-lang" v-pre>&lt;code&gt;</code> tag, enabling lines to start from a specific line number</strong></p>
<pre><code style="counter-reset: line 29;" class="hljs markdown" v-pre><span><span class="hljs-strong">*****</span>
</span><span>-----
</span></code></pre>
<p><strong><code v-pre>highlight-lines</code> attr causes corresponding lines to have 'highlighted' class</strong></p>
<p><strong><code class="hljs inline no-lang" v-pre>highlight-lines</code> attr causes corresponding lines to have 'highlighted' class</strong></p>
<pre><code class="hljs markdown" v-pre><span class="highlighted">1 highlighted
</span><span>2
</span><span class="highlighted">3 highlighted
Expand All @@ -60,7 +60,7 @@
</span><span>9
</span><span>10
</span></code></pre>
<p><strong><code v-pre>highlight-lines</code> attr with <code v-pre>start-from</code> attr should cause corresponding lines to have 'highlighted' class based on <code v-pre>start-from</code></strong></p>
<p><strong><code class="hljs inline no-lang" v-pre>highlight-lines</code> attr with <code class="hljs inline no-lang" v-pre>start-from</code> attr should cause corresponding lines to have 'highlighted' class based on <code class="hljs inline no-lang" v-pre>start-from</code></strong></p>
<pre><code style="counter-reset: line 10;" class="hljs markdown" v-pre><span class="highlighted">11 highlighted
</span><span>12
</span><span class="highlighted">13 highlighted
Expand Down Expand Up @@ -122,7 +122,7 @@
</span><span>} <span class="hljs-comment">// four empty lines above, one below</span>
</span><span>
</span></code></pre>
<p><strong>span with <code v-pre>hljs</code> class should span multiple lines <a href="https://github.com/MarkBind/markbind/pull/991#issuecomment-586547275">(Link for context)</a></strong></p>
<p><strong>span with <code class="hljs inline no-lang" v-pre>hljs</code> class should span multiple lines <a href="https://github.com/MarkBind/markbind/pull/991#issuecomment-586547275">(Link for context)</a></strong></p>
<pre><code class="hljs markdown" v-pre><span><span class="hljs-strong">*****</span>
</span><span>-----
</span></code></pre>
Expand Down
2 changes: 1 addition & 1 deletion packages/cli/test/functional/test_site/expected/testDates.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -13,7 +13,7 @@
<link rel="stylesheet" href="markbind/fontawesome/css/all.min.css">
<link rel="stylesheet" href="markbind/glyphicons/css/bootstrap-glyphicons.min.css">
<link rel="stylesheet" href="markbind/css/octicons.css">
<link rel="stylesheet" href="markbind/css/github.min.css">
<link rel="stylesheet" href="markbind/css/codeblock-dark.min.css">
<link rel="stylesheet" href="markbind/css/markbind.min.css">
<script src="markbind/js/polyfill.min.js"></script>
<script src="markbind/js/vue.min.js"></script>
Expand Down
2 changes: 1 addition & 1 deletion packages/cli/test/functional/test_site/expected/testEmptyFrontmatter.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -13,7 +13,7 @@
<link rel="stylesheet" href="markbind/fontawesome/css/all.min.css">
<link rel="stylesheet" href="markbind/glyphicons/css/bootstrap-glyphicons.min.css">
<link rel="stylesheet" href="markbind/css/octicons.css">
<link rel="stylesheet" href="markbind/css/github.min.css">
<link rel="stylesheet" href="markbind/css/codeblock-dark.min.css">
<link rel="stylesheet" href="markbind/css/markbind.min.css">
<script src="markbind/js/polyfill.min.js"></script>
<script src="markbind/js/vue.min.js"></script>
Expand Down
2 changes: 1 addition & 1 deletion packages/cli/test/functional/test_site/expected/testExternalScripts.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -13,7 +13,7 @@
<link rel="stylesheet" href="markbind/fontawesome/css/all.min.css">
<link rel="stylesheet" href="markbind/glyphicons/css/bootstrap-glyphicons.min.css">
<link rel="stylesheet" href="markbind/css/octicons.css">
<link rel="stylesheet" href="markbind/css/github.min.css">
<link rel="stylesheet" href="markbind/css/codeblock-dark.min.css">
<link rel="stylesheet" href="markbind/css/markbind.min.css">
<script src="markbind/js/polyfill.min.js"></script>
<script src="markbind/js/vue.min.js"></script>
Expand Down
Loading