Added line numbers to editable sections of code.

- Added line numbers to config struct
- Added playpen_line_numbers field to hbs renderer.
- Added section to set `window.playpen_line_numbers = true` in page template
- Use line number global variable to show line numbers when required.

book-example/book.toml

@@ -9,6 +9,7 @@ mathjax-support = true
 
 [output.html.playpen]
 editable = true
+line-numbers = true
 
 [output.html.search]
 limit-results = 20

book-example/src/format/config.md

@@ -179,6 +179,7 @@ Available configuration options for the `[output.html.playpen]` table:
 - **editable:** Allow editing the source code. Defaults to `false`.
 - **copy-js:** Copy JavaScript files for the editor to the output directory.
   Defaults to `true`.
+- **line-numbers** Display line numbers on editable sections of code. Requires both `editable` and `copy-js` to be `true`. Defaults to `false`.
 
 [Ace]: https://ace.c9.io/
 
@@ -228,6 +229,7 @@ git-repository-icon = "fa-github"
 [output.html.playpen]
 editable = false
 copy-js = true
+line-numbers = false
 
 [output.html.search]
 enable = true

src/config.rs

@@ -472,6 +472,8 @@ pub struct Playpen {
     /// Copy JavaScript files for the editor to the output directory?
     /// Default: `true`.
     pub copy_js: bool,
+    /// Display line numbers on playpen snippets
+    pub line_numbers: bool,
 }
 
 impl Default for Playpen {
@@ -479,6 +481,7 @@ impl Default for Playpen {
         Playpen {
             editable: false,
             copy_js: true,
+            line_numbers: false,
         }
     }
 }
@@ -613,6 +616,7 @@ mod tests {
         let playpen_should_be = Playpen {
             editable: true,
             copy_js: true,
+            line_numbers: false,
         };
         let html_should_be = HtmlConfig {
             curly_quotes: true,

src/renderer/html_handlebars/hbs_renderer.rs

@@ -442,6 +442,9 @@ fn make_data(
 
     if html.playpen.editable && html.playpen.copy_js {
         data.insert("playpen_js".to_owned(), json!(true));
+        if html.playpen.line_numbers {
+            data.insert("playpen_line_numbers".to_owned(), json!(true));
+        }
     }
 
     let search = html_config.search.clone();

src/theme/index.hbs

@@ -230,6 +230,12 @@
         </script>
         {{/if}}
 
+        {{#if playpen_line_numbers}}
+        <script type="text/javascript">
+            window.playpen_line_numbers = true;
+        </script>
+        {{/if}}
+
         {{#if playpen_js}}
         <script src="{{ path_to_root }}ace.js" type="text/javascript" charset="utf-8"></script>
         <script src="{{ path_to_root }}editor.js" type="text/javascript" charset="utf-8"></script>

src/theme/playpen_editor/editor.js

@@ -6,12 +6,14 @@ window.editors = [];
     }
 
     Array.from(document.querySelectorAll('.editable')).forEach(function(editable) {
+        let display_line_numbers = window.playpen_line_numbers || false;
+
         let editor = ace.edit(editable);
             editor.setOptions({
             highlightActiveLine: false,
             showPrintMargin: false,
-            showLineNumbers: false,
+            showLineNumbers: display_line_numbers,
-            showGutter: false,
+            showGutter: display_line_numbers,
             maxLines: Infinity,
             fontSize: "0.875em" // please adjust the font size of the code in general.css
         });