Skip to content

Commit d6a08c8

Browse files
george-gcageorge-gca
authored
Added pseudocode.js support (#2344)
Signed-off-by: George Araújo <[email protected]>
1 parent dba48c2 commit d6a08c8

File tree

7 files changed

+166
-16
lines changed

7 files changed

+166
-16
lines changed

‎_config.yml

+6-1
Original file line numberDiff line numberDiff line change
@@ -499,7 +499,7 @@ third_party_libraries:
499499
fonts: "output/chtml/fonts/woff-v2/"
500500
url:
501501
fonts: "https://cdn.jsdelivr.net/npm/mathjax@{{version}}/es5/output/chtml/fonts/woff-v2/"
502-
js: "https://cdn.jsdelivr.net/npm/mathjax@{{version}}/es5/tex-mml-chtml.js"
502+
js: "https://cdn.jsdelivr.net/npm/mathjax@{{version}}/es5/tex-mml-chtml.min.js"
503503
version: "3.2.0"
504504
masonry:
505505
integrity:
@@ -535,6 +535,11 @@ third_party_libraries:
535535
url:
536536
js: "https://cdnjs.cloudflare.com/polyfill/v{{version}}/polyfill.min.js?features=es6"
537537
version: "3"
538+
pseudocode:
539+
url:
540+
css: "https://cdn.jsdelivr.net/npm/pseudocode@{{version}}/build/pseudocode.min.css"
541+
js: "https://cdn.jsdelivr.net/npm/pseudocode@{{version}}/build/pseudocode.min.js"
542+
version: "2.4.1"
538543
swiper:
539544
integrity:
540545
css: "sha256-yUoNxsvX+Vo8Trj3lZ/Y5ZBf8HlBFsB6Xwm7rH75/9E="

‎_includes/head.liquid

+11
Original file line numberDiff line numberDiff line change
@@ -45,6 +45,17 @@
4545
{% endif %}
4646

4747
<!-- Styles -->
48+
49+
<!-- pseudocode -->
50+
{% if page.pseudocode %}
51+
<link
52+
defer
53+
rel="stylesheet"
54+
href="{{ site.third_party_libraries.pseudocode.url.css }}"
55+
crossorigin="anonymous"
56+
>
57+
{% endif %}
58+
4859
{% if site.icon.size <= 4 %}
4960
<link
5061
rel="shortcut icon"

‎_includes/scripts/mathjax.liquid

+17-15
Original file line numberDiff line numberDiff line change
@@ -1,17 +1,19 @@
11
{% if site.enable_math %}
2-
<!-- MathJax -->
3-
<script type="text/javascript">
4-
window.MathJax = {
5-
tex: {
6-
tags: 'ams',
7-
},
8-
};
9-
</script>
10-
<script
11-
defer
12-
type="text/javascript"
13-
id="MathJax-script"
14-
src="{{ site.third_party_libraries.mathjax.url.js }}"
15-
></script>
16-
<script defer src="{{ site.third_party_libraries.polyfill.url.js }}"></script>
2+
{% unless page.pseudocode %}
3+
<!-- MathJax -->
4+
<script type="text/javascript">
5+
window.MathJax = {
6+
tex: {
7+
tags: 'ams',
8+
},
9+
};
10+
</script>
11+
<script
12+
defer
13+
type="text/javascript"
14+
id="MathJax-script"
15+
src="{{ site.third_party_libraries.mathjax.url.js }}"
16+
></script>
17+
<script defer src="{{ site.third_party_libraries.polyfill.url.js }}"></script>
18+
{% endunless %}
1719
{% endif %}

‎_includes/scripts/pseudocode.liquid

+48
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,48 @@
1+
{% if site.enable_math and page.pseudocode %}
2+
<!-- MathJax -->
3+
<script type="text/javascript">
4+
window.MathJax = {
5+
tex: {
6+
inlineMath: [
7+
['$', '$'],
8+
['\\(', '\\)'],
9+
],
10+
displayMath: [
11+
['$$', '$$'],
12+
['\\[', '\\]'],
13+
],
14+
processEscapes: true,
15+
processEnvironments: true,
16+
},
17+
};
18+
</script>
19+
<script
20+
type="text/javascript"
21+
id="MathJax-script"
22+
src="{{ site.third_party_libraries.mathjax.url.js }}"
23+
></script>
24+
<script
25+
type="text/javascript"
26+
src="{{ site.third_party_libraries.pseudocode.url.js }}"
27+
></script>
28+
<script>
29+
document.onreadystatechange = () => {
30+
if (document.readyState === 'complete') {
31+
document.querySelectorAll('pre>code.language-pseudocode').forEach((elem) => {
32+
const texData = elem.textContent;
33+
const parent = elem.parentElement.parentElement;
34+
/* create pseudocode node */
35+
let pseudoCodeElement = document.createElement('pre');
36+
pseudoCodeElement.classList.add('pseudocode');
37+
const text = document.createTextNode(texData);
38+
pseudoCodeElement.appendChild(text);
39+
/* add pseudocode node and remove the original code block */
40+
parent.appendChild(pseudoCodeElement);
41+
parent.removeChild(elem.parentElement);
42+
/* embed the visualization in the container */
43+
pseudocode.renderElement(pseudoCodeElement);
44+
});
45+
}
46+
};
47+
</script>
48+
{% endif %}

‎_layouts/default.liquid

+1
Original file line numberDiff line numberDiff line change
@@ -64,6 +64,7 @@
6464
{% include scripts/misc.liquid %}
6565
{% include scripts/badges.liquid %}
6666
{% include scripts/mathjax.liquid %}
67+
{% include scripts/pseudocode.liquid %}
6768
{% include scripts/analytics.liquid %}
6869
{% include scripts/progressBar.liquid %}
6970
{% include scripts/wechatModal.liquid %}

‎_posts/2024-04-15-pseudocode.md

+71
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,71 @@
1+
---
2+
layout: post
3+
title: a post with pseudo code
4+
date: 2024-04-15 00:01:00
5+
description: this is what included pseudo code could look like
6+
tags: formatting code
7+
categories: sample-posts
8+
pseudocode: true
9+
---
10+
11+
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:
12+
13+
````markdown
14+
```pseudocode
15+
% This quicksort algorithm is extracted from Chapter 7, Introduction to Algorithms (3rd edition)
16+
\begin{algorithm}
17+
\caption{Quicksort}
18+
\begin{algorithmic}
19+
\PROCEDURE{Quicksort}{$$A, p, r$$}
20+
\IF{$$p < r$$}
21+
\STATE $$q = $$ \CALL{Partition}{$$A, p, r$$}
22+
\STATE \CALL{Quicksort}{$$A, p, q - 1$$}
23+
\STATE \CALL{Quicksort}{$$A, q + 1, r$$}
24+
\ENDIF
25+
\ENDPROCEDURE
26+
\PROCEDURE{Partition}{$$A, p, r$$}
27+
\STATE $$x = A[r]$$
28+
\STATE $$i = p - 1$$
29+
\FOR{$$j = p$$ \TO $$r - 1$$}
30+
\IF{$$A[j] < x$$}
31+
\STATE $$i = i + 1$$
32+
\STATE exchange
33+
$$A[i]$$ with $$A[j]$$
34+
\ENDIF
35+
\STATE exchange $$A[i]$$ with $$A[r]$$
36+
\ENDFOR
37+
\ENDPROCEDURE
38+
\end{algorithmic}
39+
\end{algorithm}
40+
```
41+
````
42+
43+
Generates:
44+
45+
```pseudocode
46+
% This quicksort algorithm is extracted from Chapter 7, Introduction to Algorithms (3rd edition)
47+
\begin{algorithm}
48+
\caption{Quicksort}
49+
\begin{algorithmic}
50+
\PROCEDURE{Quicksort}{$$A, p, r$$}
51+
\IF{$$p < r$$}
52+
\STATE $$q = $$ \CALL{Partition}{$$A, p, r$$}
53+
\STATE \CALL{Quicksort}{$$A, p, q - 1$$}
54+
\STATE \CALL{Quicksort}{$$A, q + 1, r$$}
55+
\ENDIF
56+
\ENDPROCEDURE
57+
\PROCEDURE{Partition}{$$A, p, r$$}
58+
\STATE $$x = A[r]$$
59+
\STATE $$i = p - 1$$
60+
\FOR{$$j = p$$ \TO $$r - 1$$}
61+
\IF{$$A[j] < x$$}
62+
\STATE $$i = i + 1$$
63+
\STATE exchange
64+
$$A[i]$$ with $$A[j]$$
65+
\ENDIF
66+
\STATE exchange $$A[i]$$ with $$A[r]$$
67+
\ENDFOR
68+
\ENDPROCEDURE
69+
\end{algorithmic}
70+
\end{algorithm}
71+
```

‎_sass/_base.scss

+12
Original file line numberDiff line numberDiff line change
@@ -1127,3 +1127,15 @@ swiper-container {
11271127
--swiper-pagination-color: var(--global-theme-color);
11281128
--swiper-pagination-bullet-inactive-color: var(--global-text-color);
11291129
}
1130+
1131+
.ps-root {
1132+
.ps-algorithm {
1133+
margin: 0.8em 0;
1134+
border-top: 3px solid var(--global-text-color);
1135+
border-bottom: 2px solid var(--global-text-color);
1136+
}
1137+
1138+
.ps-algorithm.with-caption > .ps-line:first-child {
1139+
border-bottom: 2px solid var(--global-text-color);
1140+
}
1141+
}

0 commit comments

Comments
 (0)