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.
This commit is contained in:
Andrew Pritchard 2019-09-24 21:27:02 +08:00
parent b4bb44292d
commit 81ab2eb7db
6 changed files with 20 additions and 2 deletions

View File

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

View File

@ -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

View File

@ -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,

View File

@ -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();

View File

@ -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>

View File

@ -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,
showGutter: false,
showLineNumbers: display_line_numbers,
showGutter: display_line_numbers,
maxLines: Infinity,
fontSize: "0.875em" // please adjust the font size of the code in general.css
});