Verified Commit 9502af77 authored by Aral Balkan's avatar Aral Balkan
Browse files

Implement mixed language syntax highlighting

parent 0f92e9c8
...@@ -9,18 +9,54 @@ ...@@ -9,18 +9,54 @@
const fs = require('fs') const fs = require('fs')
const highlightJs = require('highlight.js') const highlightJs = require('highlight.js')
function unescapeHtml(code) {
return code.replace(/&lt;/g, '<').replace(/&gt;/g, '>')
}
function unescapeReplacementString(str) {
return str.replace(/\$/g, '$$$$')
}
let index = fs.readFileSync('index.html', 'utf-8') let index = fs.readFileSync('index.html', 'utf-8')
const codeRegExp = /<code class='language-(.*?)'>(.*?)<\/code>/gs const codeRegExp = /<code class='language-(.*?)'>(.*?)<\/code>/gs
let codeSegment = codeRegExp.exec(index) let codeMatch = codeRegExp.exec(index)
while (codeSegment !== null) {
const highlightedCode = highlightJs.highlight(codeSegment[1], codeSegment[2].replace(/&lt;/g, '<').replace(/&gt;/g, '>')).value while (codeMatch !== null) {
const fullMatch = codeMatch[0]
const language = codeMatch[1]
let code = codeMatch[2]
// Note: the $ escaping is done in case the code being replaced contains $$ or $<n>, etc. if (language === 'mixed' ) {
index = index.replace(codeSegment[0], highlightedCode.replace(/\$/g, '$$$$')) // There is a mix of languages. Loop through the segments demarcated by
// span tags and highlight each in its own language.
const nestedCodeRegExp = /<span class='language-(.*?)'>(.*?)<\/span>/gs
let nestedCodeMatch = nestedCodeRegExp.exec(code)
codeSegment = codeRegExp.exec(index) while (nestedCodeMatch !== null) {
const fullNestedMatch = nestedCodeMatch[0]
const nestedLanguage = nestedCodeMatch[1]
let nestedCode = nestedCodeMatch[2]
console.log(nestedLanguage, nestedCode, fullNestedMatch)
const highlightedCode = highlightJs.highlight(nestedLanguage, unescapeHtml(nestedCode)).value
index = index.replace(fullNestedMatch, unescapeReplacementString(highlightedCode))
// Update the conditional for the next check of the loop.
nestedCodeMatch = nestedCodeRegExp.exec(code)
}
} else {
// Single language. Highlight it.
const highlightedCode = highlightJs.highlight(language, unescapeHtml(code)).value
index = index.replace(fullMatch, `<code>${unescapeReplacementString(highlightedCode)}</code>`)
}
// Update the conditional for the next check of the loop.
codeMatch = codeRegExp.exec(index)
} }
// console.log(index)
fs.writeFileSync('tmp/index.html', index) fs.writeFileSync('tmp/index.html', index)
...@@ -165,7 +165,7 @@ ol ol li::marker, aside > ol li::marker { ...@@ -165,7 +165,7 @@ ol ol li::marker, aside > ol li::marker {
font-weight: normal; font-weight: normal;
} }
pre, code { pre, code, code span {
font-family: "SFMono-Regular", font-family: "SFMono-Regular",
Consolas, Consolas,
"Fira Code", "Fira Code",
......
...@@ -180,7 +180,7 @@ ...@@ -180,7 +180,7 @@
<pre class='macos'><code class='language-bash'>curl -s https://sitejs.org/install | bash</code></pre> <pre class='macos'><code class='language-bash'>curl -s https://sitejs.org/install | bash</code></pre>
<h4 class='no-js'>Windows</h4> <h4 class='no-js'>Windows</h4>
<pre class='windows'><code class='language-bash'>iex(iwr -UseBasicParsing https://sitejs.org/install.txt).Content</code></pre> <pre class='windows'><code class='language-powershell'>iex(iwr -UseBasicParsing https://sitejs.org/install.txt).Content</code></pre>
</li> </li>
<li> <li>
<h3>Create a basic static web page.</h3> <h3>Create a basic static web page.</h3>
...@@ -206,7 +206,7 @@ ...@@ -206,7 +206,7 @@
<pre class='linux macos'><code class='language-bash'>echo 'Hello, world' > index.html</code></pre> <pre class='linux macos'><code class='language-bash'>echo 'Hello, world' > index.html</code></pre>
<h4 class='no-js'>Windows</h4> <h4 class='no-js'>Windows</h4>
<pre class='windows'><code class='language-bash'>echo 'Hello, world' | Out-File -Encoding UTF8 index.html</code></pre> <pre class='windows'><code class='language-powershell'>echo 'Hello, world' | Out-File -Encoding UTF8 index.html</code></pre>
</li> </li>
</ol> </ol>
...@@ -284,10 +284,10 @@ ...@@ -284,10 +284,10 @@
<h3>Create a basic page layout.</h3> <h3>Create a basic page layout.</h3>
<h4 class='no-js'>Linux and macOS</h4> <h4 class='no-js'>Linux and macOS</h4>
<pre class='linux macos'><code class='language-bash'>echo '<body>&lt;h1&gt;Hello, world!&lt;h1&gt;&lt;body&gt;' &gt; .hugo/layouts/index.html</code></pre> <pre class='linux macos'><code class='language-mixed'><span class='language-bash'>echo '</span><span class='language-html'>&lt;body&gt;&lt;h1&gt;Hello, world!&lt;h1&gt;&lt;body&gt;</span><span class='hljs-string'>'</span><span class='language-bash'> &gt; .hugo/layouts/index.html</span></code></pre>
<h4 class='no-js'>Windows</h4> <h4 class='no-js'>Windows</h4>
<pre class='windows'><code class='language-bash'>echo '<body>&lt;h1&gt;Hello, world!&lt;h1&gt;&lt;body&gt;' | Out-File -Encoding UTF8 .hugo/layouts/index.html</code></pre> <pre class='windows'><code class='language-mixed'><span class='language-powershell'>echo '</span><span class='language-html'>&lt;body&gt;&lt;h1&gt;Hello, world!&lt;h1&gt;&lt;body&gt;</span><span class='hljs-string'>'</span><span class='language-powershell'> | Out-File -Encoding UTF8 .hugo/layouts/index.html</span></code></pre>
<aside> <aside>
<h3>Tip</h3> <h3>Tip</h3>
...@@ -380,10 +380,10 @@ ...@@ -380,10 +380,10 @@
</p> </p>
<h4 class='no-js'>Linux and macOS</h4> <h4 class='no-js'>Linux and macOS</h4>
<pre class='linux macos'><code class='language-bash'>echo 'i=0; module.exports=(_, r)=>{r.end(`${++i}`)}' > index.js</code></pre> <pre class='linux macos'><code class='language-mixed'><span class='language-bash'>echo '</span><span class='language-js'>i=0; module.exports=(_, r)=>{r.end(`${++i}`)}</span><span class='hljs-string'>'</span><span class='language-bash'> > index.js</span></code></pre>
<h4 class='no-js'>Windows</h4> <h4 class='no-js'>Windows</h4>
<pre class='windows'><code class='language-bash'>echo 'i=0; module.exports=(_, r)=>{r.end(`${++i}`)}' | Out-File -Encoding UTF8 index.js</code></pre> <pre class='windows'><code class='language-mixed'><span class='language-powershell'>echo '</span><span class='language-js'>i=0; module.exports=(_, r)=>{r.end(`${++i}`)}</span><span class='hljs-string'>'</span><span class='language-powershell'> | Out-File -Encoding UTF8 index.js</span></code></pre>
<aside> <aside>
<h3>Tip</h3> <h3>Tip</h3>
...@@ -467,7 +467,7 @@ module.exports = (request, response) => { ...@@ -467,7 +467,7 @@ module.exports = (request, response) => {
<h3>Create the chat server.</h3> <h3>Create the chat server.</h3>
<h4 class='no-js'>Linux and macOS</h4> <h4 class='no-js'>Linux and macOS</h4>
<pre class='linux macos'><code class='language-bash'>echo " <pre class='linux macos'><code class='language-mixed'><span class='language-bash'>echo "</span><span class='language-js'>
module.exports = function (client, request) { module.exports = function (client, request) {
// Set the room based on the route’s URL. // Set the room based on the route’s URL.
client.room = this.setRoom(request) client.room = this.setRoom(request)
...@@ -477,14 +477,11 @@ module.exports = (request, response) => { ...@@ -477,14 +477,11 @@ module.exports = (request, response) => {
// Broadcast a received message to everyone in the room. // Broadcast a received message to everyone in the room.
this.broadcast(client, message) this.broadcast(client, message)
}) })
} }</span>
" > chat/.dynamic/.wss/chat.js</code></pre> <span class='hljs-string'>"</span><span class='language-bash'> > chat/.dynamic/.wss/chat.js</span></code></pre>
<h4 class='no-js'>Windows</h4> <h4 class='no-js'>Windows</h4>
<p class='windows'> <pre class='windows'><code class='language-mixed'><span class='language-powershell'>echo "</span><span class='language-js'>
Use the <code class='language-bash'>cat</code> command in terminal to write everything until the <code class='language-bash'>EOF</code> marker to a file called <em>chat.js</em>. (If you’d rather, just create the file using your favourite editor instead.)
</p>
<pre class='windows'><code class='language-bash'>echo "
module.exports = function (client, request) { module.exports = function (client, request) {
// Set the room based on the route’s URL. // Set the room based on the route’s URL.
client.room = this.setRoom(request) client.room = this.setRoom(request)
...@@ -494,8 +491,8 @@ module.exports = (request, response) => { ...@@ -494,8 +491,8 @@ module.exports = (request, response) => {
// Broadcast a received message to everyone in the room. // Broadcast a received message to everyone in the room.
this.broadcast(client, message) this.broadcast(client, message)
}) })
} }</span>
" | Out-File -Encoding UTF8 chat/.dynamic/.wss/chat.js</code></pre> <span class='hljs-string'>"</span> <span class='language-powershell'>| Out-File -Encoding UTF8 chat/.dynamic/.wss/chat.js</span></code></pre>
<aside> <aside>
<h3>Tip</h3> <h3>Tip</h3>
<p> <p>
...@@ -505,7 +502,7 @@ module.exports = (request, response) => { ...@@ -505,7 +502,7 @@ module.exports = (request, response) => {
</li> </li>
<li> <li>
<h3>Create the chat client.</h3> <h3>Create the chat client.</h3>
<pre><code class='language-html'>echo " <pre><code class='language-mixed'><span class='language-bash'>echo "</span><span class='language-html'>
&lt;!doctype html&gt; &lt;!doctype html&gt;
&lt;html lang='en'&gt; &lt;html lang='en'&gt;
&lt;title&gt;Chat&lt;/title&gt; &lt;title&gt;Chat&lt;/title&gt;
...@@ -516,7 +513,7 @@ module.exports = (request, response) => { ...@@ -516,7 +513,7 @@ module.exports = (request, response) => {
&lt;/form&gt; &lt;/form&gt;
&lt;h2&gt;Messages&lt;/h2&gt; &lt;h2&gt;Messages&lt;/h2&gt;
&lt;ul id='messageList'&gt;&lt;/ul&gt; &lt;ul id='messageList'&gt;&lt;/ul&gt;
&lt;script&gt; &lt;script&gt;</span><span class='language-js'>
const socket = new WebSocket('wss://dev.ar.al/chat') const socket = new WebSocket('wss://dev.ar.al/chat')
const showMessage = message =&gt; { const showMessage = message =&gt; {
...@@ -531,9 +528,9 @@ module.exports = (request, response) => { ...@@ -531,9 +528,9 @@ module.exports = (request, response) => {
socket.send(message) socket.send(message)
showMessage(`&lt;strong&gt;${message}&lt;/strong&gt;`) showMessage(`&lt;strong&gt;${message}&lt;/strong&gt;`)
event.preventDefault() event.preventDefault()
}) })</span><span class='language-html'>
&lt;/script&gt; &lt;/script&gt;
" > chat/index.html</code></pre> </span><span class='hljs-string'>"</span><span class='language-bash'> > chat/index.html</span></code></pre>
<aside> <aside>
<h3>Tip</h3> <h3>Tip</h3>
<p> <p>
......
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