Verified Commit 16c5d354 authored by Aral Balkan's avatar Aral Balkan
Browse files

Move syntax highlighting to the server; run at build time

parent 9e9fb639
#!/usr/bin/env node
////////////////////////////////////////////////////////////////////////////////
//
// Highlight the code.
//
////////////////////////////////////////////////////////////////////////////////
const fs = require('fs')
const highlightJs = require('highlight.js')
let index = fs.readFileSync('index.html', 'utf-8')
const codeRegExp = /<code class='language-(.*?)'>(.*?)<\/code>/gs
let codeSegment = codeRegExp.exec(index)
while (codeSegment !== null) {
const highlightedCode = highlightJs.highlight(codeSegment[1], codeSegment[2].replace(/&lt;/g, '<').replace(/&gt;/g, '>')).value
// Note: the $ escaping is done in case the code being replaced contains $$ or $<n>, etc.
index = index.replace(codeSegment[0], highlightedCode.replace(/\$/g, '$$$$'))
codeSegment = codeRegExp.exec(index)
}
fs.writeFileSync('tmp/index.html', index)
......@@ -8,7 +8,7 @@
const fs = require('fs')
let index = fs.readFileSync('index.html', 'utf-8')
let index = fs.readFileSync('tmp/index.html', 'utf-8')
const styles = fs.readFileSync('tmp/styles.css', 'utf-8')
// Note: the odd-looking replace is necessary because, after 24 years of using JavaScript, I just discovered
......
......@@ -17,9 +17,12 @@ minify css/index.css >> tmp/styles.css
# JS (temporary; to be collated into index later).
echo " > Minify JS"
minify js/highlight.pack.js >> tmp/scripts.js
minify js/index.js >> tmp/scripts.js
# Highlight code.
echo " > Highlight code"
_build/highlight-code.js
# Inline the CSS and JS into the HTML.
echo " > Inline minified CSS & JS into HTML"
_build/inline-css-and-js.js
......
......@@ -181,8 +181,10 @@ pre {
line-height: 1.5;
margin-left: -1em;
margin-right: -1em;
padding-left: 0.5em;
padding-left: 1em;
padding-right: 0.5em;
padding-top: 0.5em;
padding-bottom: 0.5em;
border-radius: 0.5em;
}
......
......@@ -231,7 +231,7 @@
</li>
<li>
<h3>Create a basic initial index page layout.</h3>
<pre><code class='language-bash'>echo '&lt;body&gt;&lt;h1&gt;Hello, world!&lt;h1&gt;&lt;body&gt;' &gt; .hugo/layouts/index.html</code></pre>
<pre><code class='language-bash'>echo '<body>&lt;h1&gt;Hello, world!&lt;h1&gt;&lt;body&gt;' &gt; .hugo/layouts/index.html</code></pre>
<aside>
<h3>Tip</h3>
<p>For Site.js’s live reload to work, your web page must contain at least a <code>&lt;body&gt;</code> tag.</p>
......
......@@ -5,7 +5,11 @@ set -e
echo "Installing site.js site for development…"
# Install build dependencies.
echo " > Build dependencies"
echo " > Build-time global dependencies"
npm install --global minify
# Install node modules.
echo " > Node.js dependencies"
npm install
echo " Done."
This diff is collapsed.
......@@ -13,10 +13,6 @@
//
////////////////////////////////////////////////////////////////////////////////
// Start the syntax highlighter.
// TODO: Move this to the server side build script.
hljs.initHighlightingOnLoad()
// Useful shortcuts for DOM lookups.
const $ = document.querySelector.bind(document)
const $$ = document.querySelectorAll.bind(document)
......
{
"name": "site.js-site",
"version": "1.0.0",
"lockfileVersion": 1
"lockfileVersion": 1,
"requires": true,
"dependencies": {
"highlight.js": {
"version": "10.0.3",
"resolved": "https://registry.npmjs.org/highlight.js/-/highlight.js-10.0.3.tgz",
"integrity": "sha512-9FG7SSzv9yOY5CGGxfI6NDm7xLYtMOjKtPBxw7Zff3t5UcRcUNTGEeS8lNjhceL34KeetLMoGMFTGoaa83HwyQ==",
"dev": true
}
}
}
......@@ -11,5 +11,8 @@
"email": "aral@small-tech.org",
"url": "https://ar.al"
},
"license": "AGPL-3.0-or-later"
"license": "AGPL-3.0-or-later",
"devDependencies": {
"highlight.js": "^10.0.3"
}
}
Markdown is supported
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment