Add a JavaScript example

book-example/book.toml

@@ -4,4 +4,5 @@ author = "Mathieu David"
 
 [output.html]
 additional-css = ["my_custom.css"]
+additional-js = ["my_custom.js"]
 mathjax-support = true

book-example/my_custom.css

@@ -0,0 +1 @@
+.custom_border { border: 2px dotted #f00; padding: 6px; }

book-example/my_custom.js

@@ -0,0 +1,12 @@
+(function() {
+// register a function run when the page is loaded completely
+document.addEventListener('DOMContentLoaded', function() {
+    // we extend all elements with class="custom_border" with a little text
+    var divs = document.querySelectorAll('.custom_border');
+    divs.forEach(function(e) {
+        try {
+            e.innerHTML += ' - extended with JavaScript';
+        } catch (e) {}
+    });
+}, false,);
+})();

book-example/src/format/config.md

@@ -19,8 +19,6 @@ destination = "my-example-book"
 additional-css = ["my_custom.css"]
 ```
 
-<div class="custom_border">Formatting elements with custom css.</div>
-
 ## Supported configuration options
 
 It is important to note that **any** relative path specified in the in the configuration will
@@ -85,7 +83,8 @@ destination = "my-book" # the output files will be generated in `root/my-book` i
 theme = "my-theme"
 curly-quotes = true
 google-analytics = "123456"
-additional-css = ["custom.css", "custom2.css"]
-additional-js = ["custom.js"]
+additional-css = ["my_custom.css", "my_custom2.css"]
+additional-js = ["my_custom.js"]
 ```
 
+<div class="custom_border">Formatting elements with custom css.</div>