Add more info about code blocks example

wigging · wigging · commit 9f068c73713b · 2025-08-31T17:08:49.000-04:00
diff --git a/docs/examples.rst b/docs/examples.rst
@@ -1,7 +1,7 @@
 Examples
 ========
 
-Examples are available in the **genja/examples** directory in the genja `GitHub <https://github.com/wigging/genja>`_ repository. Use the ``genja build`` or ``genja serve`` command to generate the HTML for a particular example. For instance, use the command shown below to build the website and run a local server for the **directory-output** example. The website will automatically reload in the web browser when changes are saved to the Markdown files.
+Examples are available in the ``genja/examples`` directory in the genja `GitHub <https://github.com/wigging/genja>`_ repository. Use the ``genja build`` or ``genja serve`` command to generate the HTML for a particular example. For instance, use the command shown below to build the website and run a local server for the ``directory-output`` example. The website will automatically reload in the web browser when changes are saved to the Markdown files.
 
 .. code:: text
 
@@ -18,12 +18,29 @@ Alternatively, use the build command to build the website without starting a loc
 Code blocks
 -----------
 
-The code-blocks example demonstrates the use of `highlight.js <https://highlightjs.org>`_ to provide syntax coloring of code that is rendered in pages and posts.
+The ``code-blocks`` example demonstrates the use of `highlight.js <https://highlightjs.org>`_ to provide syntax coloring of code that is rendered in pages and posts. The CSS and JavaScript for hightlightjs must be defined in the ``<head>...</head>`` section in the HTML page or post template such as:
+
+.. code:: html
+
+   <!-- Highlightjs -->
+   <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.5.0/styles/github-dark.min.css">
+   <script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.5.0/highlight.min.js"></script>
+   <script>hljs.highlightAll();</script>
+
+Next, code blocks can be defined in the Markdown files as follows:
+
+.. code:: text
+
+   ```python
+   def seyhello():
+       s = "hello there"
+       print(s)
+   ```
 
 Directory output
 ----------------
 
-The directory-output example defines ``site_output = "mysite"`` in the ``genja.toml`` file. This tells Genja to output the generated content to the ``mysite`` directory in the project.
+The ``directory-output`` example defines ``site_output = "mysite"`` in the ``genja.toml`` file. This tells Genja to output the generated content to the ``mysite`` directory in the project.
 
 .. code:: text
 
