docs: uniformize instructions for including js behaviours, restore in…

…fo on Prism, mention Nix syntax highlighting (#410)

docs/tips/js.md

@@ -1,6 +1,6 @@
 # JavaScript behaviours
 
-Improve your Emanote website using custom JavaScript code. Emanote provides built behaviours that can be accessed in `js` metadata key (see [[yaml-config]]).
+Improve your Emanote website using custom JavaScript code. Emanote provides some predefined behaviours, like syntax highlighting or rendering of mathematical formulas. They can be accessed by including appropriate snippets in `page.headHtml` or `page.bodyHtml` of [[yaml-config|YAML configuration files]] (if adding to all or multiple routes) or Markdown frontmatter (if adding to a single route). The source code for the snippets can be found in the default [`index.yaml`](https://github.com/srid/emanote/blob/master/default/index.yaml) under the `js:` YAML map.
 
 ```query
 path:./*

docs/tips/js/math.md

@@ -10,21 +10,13 @@ page:
 
 [MathJax](https://www.mathjax.org) can be used to render Math formulas.  For example, $a^2 + b ^ 2 = c$.
 
-1. Add the following to your `page.headHtml`, either in frontmatter or `index.yaml` (see [[yaml-config]])
-    ```yaml
-    page:
-      headHtml: |
-        <script>
-          window.MathJax = {
-            startup: {
-              ready: () => {
-                MathJax.startup.defaultReady();
-              }
-            }
-          };
-        </script>
-        <script async="" id="MathJax-script" src="https://cdn.jsdelivr.net/npm/mathjax@3/es5/tex-mml-chtml.js"></script>
-    ```
+To enable it, add the following to `page.headHtml` of [[yaml-config|YAML configuration]] or Markdown frontmatter.
+
+```yaml
+page:
+  headHtml: |
+    <snippet var="js.mathjax" />
+```
 
 ## Demo
 

docs/tips/js/mermaid.md

@@ -8,19 +8,17 @@ page:
 
 # Mermaid Diagrams
 
-[Mermaid](https://mermaid-js.github.io/mermaid/#/) lets you create diagrams and visualizations using text and code. You can define these diagrams in your Markdown code blocks. 
+[Mermaid](https://mermaid-js.github.io/mermaid/#/) lets you create diagrams and visualizations using text and code. You can define these diagrams in your Markdown code blocks.
 
-To enable this, add the following to your `page.bodyHtml`, either in frontmatter or `index.yaml` (see [[yaml-config]]):
+To enable this, add the following to `page.bodyHtml` of [[yaml-config|YAML configuration]] or Markdown frontmatter.
 
 ```yaml
 page:
   bodyHtml: |
     <snippet var="js.mermaid" />
 ```
 
-The above alias will add Mermaid `<style>` and `<script>` tags based on Emanote's defaults.[^js.mermaid-source]
-
-[^js.mermaid-source]: Source code for the `<snippet var="js.mermaid" />` alias can be found in the <https://github.com/srid/emanote/blob/master/default/index.yaml> file, under the `js:` YAML map
+The above alias will add Mermaid `<style>` and `<script>` tags based on Emanote's defaults.
 
 ## Example using Mermaid
 

docs/tips/js/syntax-highlighting.md

@@ -6,18 +6,15 @@ page:
 ---
 # Syntax Highlighting
 
-In order to enable syntax highlighting, you must use a client-side JavaScript highlighter, such as [highlight.js](https://highlightjs.org/) by adding it to `page.headHtml` of [[yaml-config]] (if adding to all or multiple routes) or Markdown frontmatter (if adding to a single route). Emanote already provides a snippet, so you may directly include the following in your `index.yaml` (assuming you are enabling it on all routes):
+In order to enable syntax highlighting, you must use a client-side JavaScript highlighter, such as [highlight.js](https://highlightjs.org/) by adding it to `page.headHtml` of [[yaml-config|YAML configuration]] or Markdown frontmatter. Emanote already provides a snippet, so you may directly include the following in your `index.yaml` (assuming you are enabling it on all routes):
 
 ```yaml
 page:
   headHtml: |
     <snippet var="js.highlightjs" />
 ```
 
-(Source code for the `<snippet var="js.highlightjs" />` alias can be found in the <https://github.com/srid/emanote/blob/master/default/index.yaml> file, under the `js:` YAML map)
-
-Bear in mind that when using highlight.js you must manually add language support. The above snippet includes Haskell by default; otherwise, it is normally added as:
-
+Bear in mind that when using highlight.js you must manually add language support. The above snippet includes Haskell and Nix by default; otherwise, it is normally added as:
 
 ```yaml
 page:
@@ -28,7 +25,7 @@ page:
     </with>
 ```
 
-(The `highlightjs-ver` variable also comes from the default `index.yaml`)
+(The `highlightjs-ver` variable comes from the default [`index.yaml`](https://github.com/srid/emanote/blob/master/default/index.yaml).)
 
 ## Example (highlight.js)
 
@@ -52,3 +49,14 @@ fib 1 = 1
 fib n = fib (n-1) + fib (n-2)
 ```
 
+## Prism
+
+A predefined snippet also exists for another syntax highlighter called [Prism](https://prismjs.com/). To use it add the following to `page.headHtml` of [[yaml-config|YAML configuration]] or Markdown frontmatter.
+
+```yaml
+page:
+  headHtml: |
+    <snippet var="js.prism" />
+```
+
+However, take note that Prism does not cooperate well with Emanote's live preview mode.