Added `pseudocode.js` support (#2344)
Signed-off-by: George Araújo <george.gcac@gmail.com>
This commit is contained in:
George
GitHub
parent
dba48c2b60
commit
d6a08c8ca3
|
|
@ -499,7 +499,7 @@ third_party_libraries:
|
|||
fonts: "output/chtml/fonts/woff-v2/"
|
||||
url:
|
||||
fonts: "https://cdn.jsdelivr.net/npm/mathjax@{{version}}/es5/output/chtml/fonts/woff-v2/"
|
||||
js: "https://cdn.jsdelivr.net/npm/mathjax@{{version}}/es5/tex-mml-chtml.js"
|
||||
js: "https://cdn.jsdelivr.net/npm/mathjax@{{version}}/es5/tex-mml-chtml.min.js"
|
||||
version: "3.2.0"
|
||||
masonry:
|
||||
integrity:
|
||||
|
|
@ -535,6 +535,11 @@ third_party_libraries:
|
|||
url:
|
||||
js: "https://cdnjs.cloudflare.com/polyfill/v{{version}}/polyfill.min.js?features=es6"
|
||||
version: "3"
|
||||
pseudocode:
|
||||
url:
|
||||
css: "https://cdn.jsdelivr.net/npm/pseudocode@{{version}}/build/pseudocode.min.css"
|
||||
js: "https://cdn.jsdelivr.net/npm/pseudocode@{{version}}/build/pseudocode.min.js"
|
||||
version: "2.4.1"
|
||||
swiper:
|
||||
integrity:
|
||||
css: "sha256-yUoNxsvX+Vo8Trj3lZ/Y5ZBf8HlBFsB6Xwm7rH75/9E="
|
||||
|
|
|
|||
|
|
@ -45,6 +45,17 @@
|
|||
{% endif %}
|
||||
|
||||
<!-- Styles -->
|
||||
|
||||
<!-- pseudocode -->
|
||||
{% if page.pseudocode %}
|
||||
<link
|
||||
defer
|
||||
rel="stylesheet"
|
||||
href="{{ site.third_party_libraries.pseudocode.url.css }}"
|
||||
crossorigin="anonymous"
|
||||
>
|
||||
{% endif %}
|
||||
|
||||
{% if site.icon.size <= 4 %}
|
||||
<link
|
||||
rel="shortcut icon"
|
||||
|
|
|
|||
|
|
@ -1,4 +1,5 @@
|
|||
{% if site.enable_math %}
|
||||
{% unless page.pseudocode %}
|
||||
<!-- MathJax -->
|
||||
<script type="text/javascript">
|
||||
window.MathJax = {
|
||||
|
|
@ -14,4 +15,5 @@
|
|||
src="{{ site.third_party_libraries.mathjax.url.js }}"
|
||||
></script>
|
||||
<script defer src="{{ site.third_party_libraries.polyfill.url.js }}"></script>
|
||||
{% endunless %}
|
||||
{% endif %}
|
||||
|
|
|
|||
|
|
@ -0,0 +1,48 @@
|
|||
{% if site.enable_math and page.pseudocode %}
|
||||
<!-- MathJax -->
|
||||
<script type="text/javascript">
|
||||
window.MathJax = {
|
||||
tex: {
|
||||
inlineMath: [
|
||||
['$', '$'],
|
||||
['\\(', '\\)'],
|
||||
],
|
||||
displayMath: [
|
||||
['$$', '$$'],
|
||||
['\\[', '\\]'],
|
||||
],
|
||||
processEscapes: true,
|
||||
processEnvironments: true,
|
||||
},
|
||||
};
|
||||
</script>
|
||||
<script
|
||||
type="text/javascript"
|
||||
id="MathJax-script"
|
||||
src="{{ site.third_party_libraries.mathjax.url.js }}"
|
||||
></script>
|
||||
<script
|
||||
type="text/javascript"
|
||||
src="{{ site.third_party_libraries.pseudocode.url.js }}"
|
||||
></script>
|
||||
<script>
|
||||
document.onreadystatechange = () => {
|
||||
if (document.readyState === 'complete') {
|
||||
document.querySelectorAll('pre>code.language-pseudocode').forEach((elem) => {
|
||||
const texData = elem.textContent;
|
||||
const parent = elem.parentElement.parentElement;
|
||||
/* create pseudocode node */
|
||||
let pseudoCodeElement = document.createElement('pre');
|
||||
pseudoCodeElement.classList.add('pseudocode');
|
||||
const text = document.createTextNode(texData);
|
||||
pseudoCodeElement.appendChild(text);
|
||||
/* add pseudocode node and remove the original code block */
|
||||
parent.appendChild(pseudoCodeElement);
|
||||
parent.removeChild(elem.parentElement);
|
||||
/* embed the visualization in the container */
|
||||
pseudocode.renderElement(pseudoCodeElement);
|
||||
});
|
||||
}
|
||||
};
|
||||
</script>
|
||||
{% endif %}
|
||||
|
|
@ -64,6 +64,7 @@
|
|||
{% include scripts/misc.liquid %}
|
||||
{% include scripts/badges.liquid %}
|
||||
{% include scripts/mathjax.liquid %}
|
||||
{% include scripts/pseudocode.liquid %}
|
||||
{% include scripts/analytics.liquid %}
|
||||
{% include scripts/progressBar.liquid %}
|
||||
{% include scripts/wechatModal.liquid %}
|
||||
|
|
|
|||
|
|
@ -0,0 +1,71 @@
|
|||
---
|
||||
layout: post
|
||||
title: a post with pseudo code
|
||||
date: 2024-04-15 00:01:00
|
||||
description: this is what included pseudo code could look like
|
||||
tags: formatting code
|
||||
categories: sample-posts
|
||||
pseudocode: true
|
||||
---
|
||||
|
||||
This is an example post with some pseudo code rendered by [pseudocode](https://github.com/SaswatPadhi/pseudocode.js). The example presented here is the same as the one in the [pseudocode.js](https://saswat.padhi.me/pseudocode.js/) documentation, with only one simple but important change: everytime you would use `$`, you should use `$$` instead. Also, note that the `pseudocode` key in the front matter is set to `true` to enable the rendering of pseudo code. As an example, using this code:
|
||||
|
||||
````markdown
|
||||
```pseudocode
|
||||
% This quicksort algorithm is extracted from Chapter 7, Introduction to Algorithms (3rd edition)
|
||||
\begin{algorithm}
|
||||
\caption{Quicksort}
|
||||
\begin{algorithmic}
|
||||
\PROCEDURE{Quicksort}{$$A, p, r$$}
|
||||
\IF{$$p < r$$}
|
||||
\STATE $$q = $$ \CALL{Partition}{$$A, p, r$$}
|
||||
\STATE \CALL{Quicksort}{$$A, p, q - 1$$}
|
||||
\STATE \CALL{Quicksort}{$$A, q + 1, r$$}
|
||||
\ENDIF
|
||||
\ENDPROCEDURE
|
||||
\PROCEDURE{Partition}{$$A, p, r$$}
|
||||
\STATE $$x = A[r]$$
|
||||
\STATE $$i = p - 1$$
|
||||
\FOR{$$j = p$$ \TO $$r - 1$$}
|
||||
\IF{$$A[j] < x$$}
|
||||
\STATE $$i = i + 1$$
|
||||
\STATE exchange
|
||||
$$A[i]$$ with $$A[j]$$
|
||||
\ENDIF
|
||||
\STATE exchange $$A[i]$$ with $$A[r]$$
|
||||
\ENDFOR
|
||||
\ENDPROCEDURE
|
||||
\end{algorithmic}
|
||||
\end{algorithm}
|
||||
```
|
||||
````
|
||||
|
||||
Generates:
|
||||
|
||||
```pseudocode
|
||||
% This quicksort algorithm is extracted from Chapter 7, Introduction to Algorithms (3rd edition)
|
||||
\begin{algorithm}
|
||||
\caption{Quicksort}
|
||||
\begin{algorithmic}
|
||||
\PROCEDURE{Quicksort}{$$A, p, r$$}
|
||||
\IF{$$p < r$$}
|
||||
\STATE $$q = $$ \CALL{Partition}{$$A, p, r$$}
|
||||
\STATE \CALL{Quicksort}{$$A, p, q - 1$$}
|
||||
\STATE \CALL{Quicksort}{$$A, q + 1, r$$}
|
||||
\ENDIF
|
||||
\ENDPROCEDURE
|
||||
\PROCEDURE{Partition}{$$A, p, r$$}
|
||||
\STATE $$x = A[r]$$
|
||||
\STATE $$i = p - 1$$
|
||||
\FOR{$$j = p$$ \TO $$r - 1$$}
|
||||
\IF{$$A[j] < x$$}
|
||||
\STATE $$i = i + 1$$
|
||||
\STATE exchange
|
||||
$$A[i]$$ with $$A[j]$$
|
||||
\ENDIF
|
||||
\STATE exchange $$A[i]$$ with $$A[r]$$
|
||||
\ENDFOR
|
||||
\ENDPROCEDURE
|
||||
\end{algorithmic}
|
||||
\end{algorithm}
|
||||
```
|
||||
|
|
@ -1127,3 +1127,15 @@ swiper-container {
|
|||
--swiper-pagination-color: var(--global-theme-color);
|
||||
--swiper-pagination-bullet-inactive-color: var(--global-text-color);
|
||||
}
|
||||
|
||||
.ps-root {
|
||||
.ps-algorithm {
|
||||
margin: 0.8em 0;
|
||||
border-top: 3px solid var(--global-text-color);
|
||||
border-bottom: 2px solid var(--global-text-color);
|
||||
}
|
||||
|
||||
.ps-algorithm.with-caption > .ps-line:first-child {
|
||||
border-bottom: 2px solid var(--global-text-color);
|
||||
}
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in New Issue