mirror_css/98.css
1
0
Fork 0
mirror of https://github.com/jdan/98.css.git synced 2025-08-30 17:19:56 +02:00
Code Issues Releases Wiki Activity

add highlight.js

Browse Source
This commit is contained in:
Jordan Scales
2020-04-21 15:46:35 -04:00
parent 002606b680
commit c304370840
9 changed files with 143 additions and 50 deletions
Download Patch File Download Diff File Expand all files Collapse all files

7
build.js
View File

@@ -2,6 +2,7 @@
const dedent = require("dedent"); const dedent = require("dedent");
const ejs = require("ejs"); const ejs = require("ejs");
const fs = require("fs"); const fs = require("fs");
const hljs = require("highlight.js");
const mkdirp = require("mkdirp"); const mkdirp = require("mkdirp");
const postcss = require("postcss"); const postcss = require("postcss");
@@ -17,10 +18,8 @@ function example(code) {
const magicBrackets = /\[\[(.*)\]\]/g; const magicBrackets = /\[\[(.*)\]\]/g;
const dedented = dedent(code); const dedented = dedent(code);
const inline = dedented.replace(magicBrackets, "$1"); const inline = dedented.replace(magicBrackets, "$1");
const escaped = dedented const escaped = hljs.highlight("html", dedented.replace(magicBrackets, ""))
.replace(magicBrackets, "") .value;
.replace(/</g, "&lt;")
.replace(/>/g, "&gt;");
return `<div class="example"> return `<div class="example">
${inline} ${inline}

4
build/98.css
View File

@@ -511,10 +511,10 @@ pre {
inset 2px 2px #0a0a0a; inset 2px 2px #0a0a0a;
padding: 12px 8px; padding: 12px 8px;
margin: 0; margin: 0;
font-family: monospace;
} }
code { code,
code * {
font-family: monospace; font-family: monospace;
} }

4
docs/98.css
View File

@@ -511,10 +511,10 @@ pre {
inset 2px 2px #0a0a0a; inset 2px 2px #0a0a0a;
padding: 12px 8px; padding: 12px 8px;
margin: 0; margin: 0;
font-family: monospace;
} }
code { code,
code * {
font-family: monospace; font-family: monospace;
} }

88
docs/index.html
View File

@@ -5,6 +5,7 @@
<meta name="viewport" content="width=device-width, initial-scale=1" /> <meta name="viewport" content="width=device-width, initial-scale=1" />
<link rel="stylesheet" href="98.css"></style> <link rel="stylesheet" href="98.css"></style>
<link rel="stylesheet" href="docs.css"></style> <link rel="stylesheet" href="docs.css"></style>
<link rel="stylesheet" href="vs.css"></style>
</head> </head>
<body> <body>
<aside> <aside>
@@ -14,11 +15,20 @@
<a href="#components">Components</a> <a href="#components">Components</a>
<ul> <ul>
<li><a href="#button">Button</a></li> <li><a href="#button">Button</a></li>
<li><a href="#dialog">Dialog</a></li>
<li><a href="#checkbox">Checkbox</a></li> <li><a href="#checkbox">Checkbox</a></li>
<li><a href="#option-button">OptionButton</a></li> <li><a href="#option-button">OptionButton</a></li>
<li><a href="#fieldset">Fieldset</a></li>
<li><a href="#text-box">TextBox</a></li> <li><a href="#text-box">TextBox</a></li>
<li><a href="#multiline-text-box">Multiline TextBox</a></li> <li><a href="#multiline-text-box">Multiline TextBox</a></li>
<li>
<a href="#dialog">Dialog</a>
<ul>
<li><a href="#menubar">Menubar</a></li>
<li><a href="#controls">Controls</a></li>
<li><a href="#all-together">All together</a></li>
</ul>
</li>
<li><a href="#treeview">TreeView</a></li>
</ul> </ul>
</li> </li>
<li><a href="#extras">Extras</a></li> <li><a href="#extras">Extras</a></li>
@@ -98,7 +108,7 @@
<button>Click me</button> <button>Click me</button>
<details> <details>
<summary>Show code</summary> <summary>Show code</summary>
<pre><code>&lt;button&gt;Click me&lt;/button&gt;</code></pre> <pre><code><span class="hljs-tag">&lt;<span class="hljs-name">button</span>&gt;</span>Click me<span class="hljs-tag">&lt;/<span class="hljs-name">button</span>&gt;</span></code></pre>
</details> </details>
</div> </div>
@@ -112,7 +122,7 @@
<button class="active">I am being pressed</button> <button class="active">I am being pressed</button>
<details> <details>
<summary>Show code</summary> <summary>Show code</summary>
<pre><code>&lt;button&gt;I am being pressed&lt;/button&gt;</code></pre> <pre><code><span class="hljs-tag">&lt;<span class="hljs-name">button</span>&gt;</span>I am being pressed<span class="hljs-tag">&lt;/<span class="hljs-name">button</span>&gt;</span></code></pre>
</details> </details>
</div> </div>
@@ -125,7 +135,7 @@
<button disabled>I cannot be clicked</button> <button disabled>I cannot be clicked</button>
<details> <details>
<summary>Show code</summary> <summary>Show code</summary>
<pre><code>&lt;button disabled&gt;I cannot be clicked&lt;/button&gt;</code></pre> <pre><code><span class="hljs-tag">&lt;<span class="hljs-name">button</span> <span class="hljs-attr">disabled</span>&gt;</span>I cannot be clicked<span class="hljs-tag">&lt;/<span class="hljs-name">button</span>&gt;</span></code></pre>
</details> </details>
</div> </div>
@@ -138,7 +148,7 @@
<button class="focused">I am focused</button> <button class="focused">I am focused</button>
<details> <details>
<summary>Show code</summary> <summary>Show code</summary>
<pre><code>&lt;button&gt;I am focused&lt;/button&gt;</code></pre> <pre><code><span class="hljs-tag">&lt;<span class="hljs-name">button</span>&gt;</span>I am focused<span class="hljs-tag">&lt;/<span class="hljs-name">button</span>&gt;</span></code></pre>
</details> </details>
</div> </div>
</div> </div>
@@ -170,8 +180,8 @@
<label for="example1">This is a checkbox</label> <label for="example1">This is a checkbox</label>
<details> <details>
<summary>Show code</summary> <summary>Show code</summary>
<pre><code>&lt;input type="checkbox" id="example1"&gt; <pre><code><span class="hljs-tag">&lt;<span class="hljs-name">input</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"checkbox"</span> <span class="hljs-attr">id</span>=<span class="hljs-string">"example1"</span>&gt;</span>
&lt;label for="example1"&gt;This is a checkbox&lt;/label&gt;</code></pre> <span class="hljs-tag">&lt;<span class="hljs-name">label</span> <span class="hljs-attr">for</span>=<span class="hljs-string">"example1"</span>&gt;</span>This is a checkbox<span class="hljs-tag">&lt;/<span class="hljs-name">label</span>&gt;</span></code></pre>
</details> </details>
</div> </div>
@@ -200,18 +210,18 @@
</div> </div>
<details> <details>
<summary>Show code</summary> <summary>Show code</summary>
<pre><code>&lt;div class="field-row"&gt; <pre><code><span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"field-row"</span>&gt;</span>
&lt;input checked type="checkbox" id="example2"&gt; <span class="hljs-tag">&lt;<span class="hljs-name">input</span> <span class="hljs-attr">checked</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"checkbox"</span> <span class="hljs-attr">id</span>=<span class="hljs-string">"example2"</span>&gt;</span>
&lt;label for="example2"&gt;I am checked&lt;/label&gt; <span class="hljs-tag">&lt;<span class="hljs-name">label</span> <span class="hljs-attr">for</span>=<span class="hljs-string">"example2"</span>&gt;</span>I am checked<span class="hljs-tag">&lt;/<span class="hljs-name">label</span>&gt;</span>
&lt;/div&gt; <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
&lt;div class="field-row"&gt; <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"field-row"</span>&gt;</span>
&lt;input disabled type="checkbox" id="example3"&gt; <span class="hljs-tag">&lt;<span class="hljs-name">input</span> <span class="hljs-attr">disabled</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"checkbox"</span> <span class="hljs-attr">id</span>=<span class="hljs-string">"example3"</span>&gt;</span>
&lt;label for="example3"&gt;I am inactive&lt;/label&gt; <span class="hljs-tag">&lt;<span class="hljs-name">label</span> <span class="hljs-attr">for</span>=<span class="hljs-string">"example3"</span>&gt;</span>I am inactive<span class="hljs-tag">&lt;/<span class="hljs-name">label</span>&gt;</span>
&lt;/div&gt; <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
&lt;div class="field-row"&gt; <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"field-row"</span>&gt;</span>
&lt;input checked disabled type="checkbox" id="example4"&gt; <span class="hljs-tag">&lt;<span class="hljs-name">input</span> <span class="hljs-attr">checked</span> <span class="hljs-attr">disabled</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"checkbox"</span> <span class="hljs-attr">id</span>=<span class="hljs-string">"example4"</span>&gt;</span>
&lt;label for="example4"&gt;I am inactive but still checked&lt;/label&gt; <span class="hljs-tag">&lt;<span class="hljs-name">label</span> <span class="hljs-attr">for</span>=<span class="hljs-string">"example4"</span>&gt;</span>I am inactive but still checked<span class="hljs-tag">&lt;/<span class="hljs-name">label</span>&gt;</span>
&lt;/div&gt;</code></pre> <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span></code></pre>
</details> </details>
</div> </div>
</div> </div>
@@ -245,14 +255,14 @@
</div> </div>
<details> <details>
<summary>Show code</summary> <summary>Show code</summary>
<pre><code>&lt;div class="field-row"&gt; <pre><code><span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"field-row"</span>&gt;</span>
&lt;input id="radio5" type="radio" name="first-example"&gt; <span class="hljs-tag">&lt;<span class="hljs-name">input</span> <span class="hljs-attr">id</span>=<span class="hljs-string">"radio5"</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"radio"</span> <span class="hljs-attr">name</span>=<span class="hljs-string">"first-example"</span>&gt;</span>
&lt;label for="radio5"&gt;Yes&lt;/label&gt; <span class="hljs-tag">&lt;<span class="hljs-name">label</span> <span class="hljs-attr">for</span>=<span class="hljs-string">"radio5"</span>&gt;</span>Yes<span class="hljs-tag">&lt;/<span class="hljs-name">label</span>&gt;</span>
&lt;/div&gt; <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
&lt;div class="field-row"&gt; <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"field-row"</span>&gt;</span>
&lt;input id="radio6" type="radio" name="first-example"&gt; <span class="hljs-tag">&lt;<span class="hljs-name">input</span> <span class="hljs-attr">id</span>=<span class="hljs-string">"radio6"</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"radio"</span> <span class="hljs-attr">name</span>=<span class="hljs-string">"first-example"</span>&gt;</span>
&lt;label for="radio6"&gt;No&lt;/label&gt; <span class="hljs-tag">&lt;<span class="hljs-name">label</span> <span class="hljs-attr">for</span>=<span class="hljs-string">"radio6"</span>&gt;</span>No<span class="hljs-tag">&lt;/<span class="hljs-name">label</span>&gt;</span>
&lt;/div&gt;</code></pre> <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span></code></pre>
</details> </details>
</div> </div>
@@ -276,18 +286,18 @@
</div> </div>
<details> <details>
<summary>Show code</summary> <summary>Show code</summary>
<pre><code>&lt;div class="field-row"&gt; <pre><code><span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"field-row"</span>&gt;</span>
&lt;input id="radio7" type="radio" name="second-example"&gt; <span class="hljs-tag">&lt;<span class="hljs-name">input</span> <span class="hljs-attr">id</span>=<span class="hljs-string">"radio7"</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"radio"</span> <span class="hljs-attr">name</span>=<span class="hljs-string">"second-example"</span>&gt;</span>
&lt;label for="radio7"&gt;Peanut butter should be smooth&lt;/label&gt; <span class="hljs-tag">&lt;<span class="hljs-name">label</span> <span class="hljs-attr">for</span>=<span class="hljs-string">"radio7"</span>&gt;</span>Peanut butter should be smooth<span class="hljs-tag">&lt;/<span class="hljs-name">label</span>&gt;</span>
&lt;/div&gt; <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
&lt;div class="field-row"&gt; <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"field-row"</span>&gt;</span>
&lt;input checked disabled id="radio8" type="radio" name="second-example"&gt; <span class="hljs-tag">&lt;<span class="hljs-name">input</span> <span class="hljs-attr">checked</span> <span class="hljs-attr">disabled</span> <span class="hljs-attr">id</span>=<span class="hljs-string">"radio8"</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"radio"</span> <span class="hljs-attr">name</span>=<span class="hljs-string">"second-example"</span>&gt;</span>
&lt;label for="radio8"&gt;I understand why people like crunchy peanut butter&lt;/label&gt; <span class="hljs-tag">&lt;<span class="hljs-name">label</span> <span class="hljs-attr">for</span>=<span class="hljs-string">"radio8"</span>&gt;</span>I understand why people like crunchy peanut butter<span class="hljs-tag">&lt;/<span class="hljs-name">label</span>&gt;</span>
&lt;/div&gt; <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
&lt;div class="field-row"&gt; <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"field-row"</span>&gt;</span>
&lt;input disabled id="radio9" type="radio" name="second-example"&gt; <span class="hljs-tag">&lt;<span class="hljs-name">input</span> <span class="hljs-attr">disabled</span> <span class="hljs-attr">id</span>=<span class="hljs-string">"radio9"</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"radio"</span> <span class="hljs-attr">name</span>=<span class="hljs-string">"second-example"</span>&gt;</span>
&lt;label for="radio9"&gt;Crunchy peanut butter is good&lt;/label&gt; <span class="hljs-tag">&lt;<span class="hljs-name">label</span> <span class="hljs-attr">for</span>=<span class="hljs-string">"radio9"</span>&gt;</span>Crunchy peanut butter is good<span class="hljs-tag">&lt;/<span class="hljs-name">label</span>&gt;</span>
&lt;/div&gt;</code></pre> <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span></code></pre>
</details> </details>
</div> </div>
</div> </div>

12
docs/index.html.ejs
View File

@@ -5,6 +5,7 @@
<meta name="viewport" content="width=device-width, initial-scale=1" /> <meta name="viewport" content="width=device-width, initial-scale=1" />
<link rel="stylesheet" href="98.css"></style> <link rel="stylesheet" href="98.css"></style>
<link rel="stylesheet" href="docs.css"></style> <link rel="stylesheet" href="docs.css"></style>
<link rel="stylesheet" href="vs.css"></style>
</head> </head>
<body> <body>
<aside> <aside>
@@ -14,11 +15,20 @@
<a href="#components">Components</a> <a href="#components">Components</a>
<ul> <ul>
<li><a href="#button">Button</a></li> <li><a href="#button">Button</a></li>
<li><a href="#dialog">Dialog</a></li>
<li><a href="#checkbox">Checkbox</a></li> <li><a href="#checkbox">Checkbox</a></li>
<li><a href="#option-button">OptionButton</a></li> <li><a href="#option-button">OptionButton</a></li>
<li><a href="#fieldset">Fieldset</a></li>
<li><a href="#text-box">TextBox</a></li> <li><a href="#text-box">TextBox</a></li>
<li><a href="#multiline-text-box">Multiline TextBox</a></li> <li><a href="#multiline-text-box">Multiline TextBox</a></li>
<li>
<a href="#dialog">Dialog</a>
<ul>
<li><a href="#menubar">Menubar</a></li>
<li><a href="#controls">Controls</a></li>
<li><a href="#all-together">All together</a></li>
</ul>
</li>
<li><a href="#treeview">TreeView</a></li>
</ul> </ul>
</li> </li>
<li><a href="#extras">Extras</a></li> <li><a href="#extras">Extras</a></li>

67
docs/vs.css Normal file
View File

@@ -0,0 +1,67 @@
/*
Visual Studio-like style based on original C# coloring by Jason Diamond <jason@diamond.name>
*/
.hljs {
display: block;
overflow-x: auto;
padding: 0.5em;
background: white;
color: black;
}
.hljs-comment,
.hljs-quote,
.hljs-variable {
color: #008000;
}
.hljs-keyword,
.hljs-selector-tag,
.hljs-built_in,
.hljs-name,
.hljs-tag {
color: #00f;
}
.hljs-string,
.hljs-title,
.hljs-section,
.hljs-attribute,
.hljs-literal,
.hljs-template-tag,
.hljs-template-variable,
.hljs-type,
.hljs-addition {
color: #a31515;
}
.hljs-deletion,
.hljs-selector-attr,
.hljs-selector-pseudo,
.hljs-meta {
color: #2b91af;
}
.hljs-doctag {
color: #808080;
}
.hljs-attr {
color: #f00;
}
.hljs-symbol,
.hljs-bullet,
.hljs-link {
color: #00b0e8;
}
.hljs-emphasis {
font-style: italic;
}
.hljs-strong {
font-weight: bold;
}

6
package-lock.json generated
View File

@@ -166,6 +166,12 @@
"integrity": "sha1-tdRU3CGZriJWmfNGfloH87lVuv0=", "integrity": "sha1-tdRU3CGZriJWmfNGfloH87lVuv0=",
"dev": true "dev": true
}, },
"highlight.js": {
"version": "9.18.1",
"resolved": "https://registry.npmjs.org/highlight.js/-/highlight.js-9.18.1.tgz",
"integrity": "sha512-OrVKYz70LHsnCgmbXctv/bfuvntIKDz177h0Co37DQ5jamGZLVmoCVMtjMtNZY3X9DrCcKfklHPNeA0uPZhSJg==",
"dev": true
},
"htmlparser2": { "htmlparser2": {
"version": "3.10.1", "version": "3.10.1",
"resolved": "https://registry.npmjs.org/htmlparser2/-/htmlparser2-3.10.1.tgz", "resolved": "https://registry.npmjs.org/htmlparser2/-/htmlparser2-3.10.1.tgz",

1
package.json
View File

@@ -27,6 +27,7 @@
"devDependencies": { "devDependencies": {
"dedent": "^0.7.0", "dedent": "^0.7.0",
"ejs": "^3.0.2", "ejs": "^3.0.2",
"highlight.js": "^9.18.1",
"mkdirp": "^1.0.4", "mkdirp": "^1.0.4",
"postcss-css-variables": "^0.14.0", "postcss-css-variables": "^0.14.0",
"postcss-inline": "^1.2.0", "postcss-inline": "^1.2.0",

4
style.css
View File

@@ -429,10 +429,10 @@ pre {
box-shadow: var(--border-field); box-shadow: var(--border-field);
padding: 12px 8px; padding: 12px 8px;
margin: 0; margin: 0;
font-family: monospace;
} }
code { code,
code * {
font-family: monospace; font-family: monospace;
} }