allow per-element option overriding

SaswatPadhi · May 28, 2023 · 30f2576 · 30f2576
1 parent 39e43af
commit 30f2576
Show file tree

Hide file tree

Showing 7 changed files with 32 additions and 12 deletions.
diff --git a/README.md b/README.md
@@ -241,8 +241,10 @@ To display the caption of an algorithm, use `algorithm` environment as a 'float'
 ```
 
 ### Options
-`pseudocode.renderElement` can accept an option as the last argument,
-such as
+
+#### Global Options
+
+`pseudocode.renderElement` can accept an option object as the last argument, such as
 
 ```js
 pseudocode.renderElement(document.getElementById("quicksort"),
@@ -274,6 +276,21 @@ var DEFAULT_OPTIONS = {
 };
 ```
 
+#### Per-Element Options
+
+The above-mentioned global options may be overridden on a per-element basis
+using [HTML `data-*` attributes](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/dataset)
+on the `<pre>` DOM element.
+
+The following example demonstrates how to enable line numbers and change title prefix:
+
+```html
+<pre id="quicksort" class="pseudocode" style="display:hidden;"
+     data-line-number=true data-title-prefix="Algo">
+   ...
+</pre>
+```
+
 ## Build and Test
 pseudocode.js is written in JavaScript and built with [Node.js](https://nodejs.org).
 So, make sure you have Node.js installed before building pseudocode.js.

diff --git a/docs/katex-samples.html b/docs/katex-samples.html
@@ -17,7 +17,7 @@
 </head>
 
 <body>
-    <pre id="test-basics" style="display:none">
+    <pre id="test-basics" style="display:none" data-line-number=true>
         \begin{algorithm}
         \caption{Test text-style}
         \begin{algorithmic}
@@ -141,7 +141,7 @@
         \end{algorithmic}
         \end{algorithm}
     </pre>
-    <pre id="test-examples" style="display:none">
+    <pre id="test-examples" style="display:none" data-title-prefix="Procedure">
         % This quicksort algorithm is extracted from Chapter 7, Introduction
         % to Algorithms (3rd edition)
         \begin{algorithm}

diff --git a/docs/mathjax-v2-samples.html b/docs/mathjax-v2-samples.html
@@ -28,7 +28,7 @@
 </head>
 
 <body>
-    <pre id="test-basics" style="display:none">
+    <pre id="test-basics" style="display:none" data-line-number=true>
         \begin{algorithm}
         \caption{Test text-style}
         \begin{algorithmic}
@@ -152,7 +152,7 @@
         \end{algorithmic}
         \end{algorithm}
     </pre>
-    <pre id="test-examples" style="display:none">
+    <pre id="test-examples" style="display:none" data-title-prefix="Procedure">
         % This quicksort algorithm is extracted from Chapter 7, Introduction
         % to Algorithms (3rd edition)
         \begin{algorithm}

diff --git a/docs/mathjax-v3-samples.html b/docs/mathjax-v3-samples.html
@@ -27,7 +27,7 @@
 </head>
 
 <body>
-    <pre id="test-basics" style="display:none">
+    <pre id="test-basics" style="display:none" data-line-number=true>
         \begin{algorithm}
         \caption{Test text-style}
         \begin{algorithmic}
@@ -151,7 +151,7 @@
         \end{algorithmic}
         \end{algorithm}
     </pre>
-    <pre id="test-examples" style="display:none">
+    <pre id="test-examples" style="display:none" data-title-prefix="Procedure">
         % This quicksort algorithm is extracted from Chapter 7, Introduction
         % to Algorithms (3rd edition)
         \begin{algorithm}

diff --git a/docs/pseudocode.js b/docs/pseudocode.js
diff --git a/pseudocode.js b/pseudocode.js
@@ -47,7 +47,10 @@ module.exports = {
 
         elem.style.display = 'none';
 
-        var R = makeRenderer(elem.textContent, options);
+        var elemOptions = JSON.parse(JSON.stringify(options));
+        for (const dataProp in elem.dataset)
+            elemOptions[dataProp] = elem.dataset[dataProp];
+        var R = makeRenderer(elem.textContent, elemOptions);
 
         var newElem = R.toDOM();
         elem.replaceWith(newElem);

diff --git a/static/body.html.part b/static/body.html.part
@@ -1,7 +1,7 @@
 </head>
 
 <body>
-    <pre id="test-basics" style="display:none">
+    <pre id="test-basics" style="display:none" data-line-number=true>
         \begin{algorithm}
         \caption{Test text-style}
         \begin{algorithmic}
@@ -125,7 +125,7 @@
         \end{algorithmic}
         \end{algorithm}
     </pre>
-    <pre id="test-examples" style="display:none">
+    <pre id="test-examples" style="display:none" data-title-prefix="Procedure">
         % This quicksort algorithm is extracted from Chapter 7, Introduction
         % to Algorithms (3rd edition)
         \begin{algorithm}