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:
parent
b4bb44292d
commit
81ab2eb7db
|
@ -9,6 +9,7 @@ mathjax-support = true
|
||||||
|
|
||||||
[output.html.playpen]
|
[output.html.playpen]
|
||||||
editable = true
|
editable = true
|
||||||
|
line-numbers = true
|
||||||
|
|
||||||
[output.html.search]
|
[output.html.search]
|
||||||
limit-results = 20
|
limit-results = 20
|
||||||
|
|
|
@ -179,6 +179,7 @@ Available configuration options for the `[output.html.playpen]` table:
|
||||||
- **editable:** Allow editing the source code. Defaults to `false`.
|
- **editable:** Allow editing the source code. Defaults to `false`.
|
||||||
- **copy-js:** Copy JavaScript files for the editor to the output directory.
|
- **copy-js:** Copy JavaScript files for the editor to the output directory.
|
||||||
Defaults to `true`.
|
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/
|
[Ace]: https://ace.c9.io/
|
||||||
|
|
||||||
|
@ -228,6 +229,7 @@ git-repository-icon = "fa-github"
|
||||||
[output.html.playpen]
|
[output.html.playpen]
|
||||||
editable = false
|
editable = false
|
||||||
copy-js = true
|
copy-js = true
|
||||||
|
line-numbers = false
|
||||||
|
|
||||||
[output.html.search]
|
[output.html.search]
|
||||||
enable = true
|
enable = true
|
||||||
|
|
|
@ -472,6 +472,8 @@ pub struct Playpen {
|
||||||
/// Copy JavaScript files for the editor to the output directory?
|
/// Copy JavaScript files for the editor to the output directory?
|
||||||
/// Default: `true`.
|
/// Default: `true`.
|
||||||
pub copy_js: bool,
|
pub copy_js: bool,
|
||||||
|
/// Display line numbers on playpen snippets
|
||||||
|
pub line_numbers: bool,
|
||||||
}
|
}
|
||||||
|
|
||||||
impl Default for Playpen {
|
impl Default for Playpen {
|
||||||
|
@ -479,6 +481,7 @@ impl Default for Playpen {
|
||||||
Playpen {
|
Playpen {
|
||||||
editable: false,
|
editable: false,
|
||||||
copy_js: true,
|
copy_js: true,
|
||||||
|
line_numbers: false,
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
@ -613,6 +616,7 @@ mod tests {
|
||||||
let playpen_should_be = Playpen {
|
let playpen_should_be = Playpen {
|
||||||
editable: true,
|
editable: true,
|
||||||
copy_js: true,
|
copy_js: true,
|
||||||
|
line_numbers: false,
|
||||||
};
|
};
|
||||||
let html_should_be = HtmlConfig {
|
let html_should_be = HtmlConfig {
|
||||||
curly_quotes: true,
|
curly_quotes: true,
|
||||||
|
|
|
@ -442,6 +442,9 @@ fn make_data(
|
||||||
|
|
||||||
if html.playpen.editable && html.playpen.copy_js {
|
if html.playpen.editable && html.playpen.copy_js {
|
||||||
data.insert("playpen_js".to_owned(), json!(true));
|
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();
|
let search = html_config.search.clone();
|
||||||
|
|
|
@ -230,6 +230,12 @@
|
||||||
</script>
|
</script>
|
||||||
{{/if}}
|
{{/if}}
|
||||||
|
|
||||||
|
{{#if playpen_line_numbers}}
|
||||||
|
<script type="text/javascript">
|
||||||
|
window.playpen_line_numbers = true;
|
||||||
|
</script>
|
||||||
|
{{/if}}
|
||||||
|
|
||||||
{{#if playpen_js}}
|
{{#if playpen_js}}
|
||||||
<script src="{{ path_to_root }}ace.js" type="text/javascript" charset="utf-8"></script>
|
<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>
|
<script src="{{ path_to_root }}editor.js" type="text/javascript" charset="utf-8"></script>
|
||||||
|
|
|
@ -6,12 +6,14 @@ window.editors = [];
|
||||||
}
|
}
|
||||||
|
|
||||||
Array.from(document.querySelectorAll('.editable')).forEach(function(editable) {
|
Array.from(document.querySelectorAll('.editable')).forEach(function(editable) {
|
||||||
|
let display_line_numbers = window.playpen_line_numbers || false;
|
||||||
|
|
||||||
let editor = ace.edit(editable);
|
let editor = ace.edit(editable);
|
||||||
editor.setOptions({
|
editor.setOptions({
|
||||||
highlightActiveLine: false,
|
highlightActiveLine: false,
|
||||||
showPrintMargin: false,
|
showPrintMargin: false,
|
||||||
showLineNumbers: false,
|
showLineNumbers: display_line_numbers,
|
||||||
showGutter: false,
|
showGutter: display_line_numbers,
|
||||||
maxLines: Infinity,
|
maxLines: Infinity,
|
||||||
fontSize: "0.875em" // please adjust the font size of the code in general.css
|
fontSize: "0.875em" // please adjust the font size of the code in general.css
|
||||||
});
|
});
|
||||||
|
|
Loading…
Reference in New Issue