mirror/reveal.js
1
0
Fork 0
mirror of https://github.com/hakimel/reveal.js.git synced 2025-08-16 03:24:29 +02:00
Code Issues Releases Wiki Activity

Merge pull request #3409 from flowolf/add-code-line-offset-to-markdown

Browse Source 
[Markdown plugin] add line number offset for code sections to markdown
This commit is contained in:
Hakim El Hattab
2023-05-15 14:14:30 +02:00
committed by GitHub
parent 0301ce58ab bf749ee1da
commit 0d699ec7f5
5 changed files with 73 additions and 7 deletions
Download Patch File Download Diff File Expand all files Collapse all files

19
examples/markdown.html
View File

@@ -99,6 +99,25 @@
</script>
</section>
<!-- add optional line count offset, in this case 287 -->
<section data-markdown>
<script type="text/template">
## echo.c
```c [287: 2|4,6]
/* All of the options in this arg are valid, so handle them. */
p = arg + 1;
do {
if (*p == 'n')
nflag = 0;
if (*p == 'e')
eflag = '\\';
} while (*++p);
```
[source](https://git.busybox.net/busybox/tree/coreutils/echo.c?h=1_36_stable#n287)
</script>
</section>
<!-- Images -->
<section data-markdown>
<script type="text/template">

4
plugin/markdown/markdown.esm.js
View File

File diff suppressed because one or more lines are too long

4
plugin/markdown/markdown.js
View File

File diff suppressed because one or more lines are too long

19
plugin/markdown/plugin.js
View File

@@ -13,7 +13,9 @@ const DEFAULT_SLIDE_SEPARATOR = '\r?\n---\r?\n',
const SCRIPT_END_PLACEHOLDER = '__SCRIPT_END__';
const CODE_LINE_NUMBER_REGEX = /\[([\s\d,|-]*)\]/;
// match an optional line number offset and highlight line numbers
// [<line numbers>] or [<offset>: <line numbers>]
const CODE_LINE_NUMBER_REGEX = /\[\s*((\d*):)?\s*([\s\d,|-]*)\]/;
const HTML_ESCAPE_MAP = {
'&': '&amp;',
@@ -429,14 +431,23 @@ const Plugin = () => {
renderer.code = ( code, language ) => {
// Off by default
let lineNumberOffset = '';
let lineNumbers = '';
// Users can opt in to show line numbers and highlight
// specific lines.
// ```javascript [] show line numbers
// ```javascript [1,4-8] highlights lines 1 and 4-8
// optional line number offset:
// ```javascript [25: 1,4-8] start line numbering at 25,
// highlights lines 1 (numbered as 25) and 4-8 (numbered as 28-32)
if( CODE_LINE_NUMBER_REGEX.test( language ) ) {
lineNumbers = language.match( CODE_LINE_NUMBER_REGEX )[1].trim();
let lineNumberOffsetMatch = language.match( CODE_LINE_NUMBER_REGEX )[2];
if (lineNumberOffsetMatch){
lineNumberOffset = `data-ln-start-from="${lineNumberOffsetMatch.trim()}"`;
}
lineNumbers = language.match( CODE_LINE_NUMBER_REGEX )[3].trim();
lineNumbers = `data-line-numbers="${lineNumbers}"`;
language = language.replace( CODE_LINE_NUMBER_REGEX, '' ).trim();
}
@@ -446,7 +457,9 @@ const Plugin = () => {
// highlight.js is able to read it
code = escapeForHTML( code );
return `<pre><code ${lineNumbers} class="${language}">${code}</code></pre>`;
// return `<pre><code ${lineNumbers} class="${language}">${code}</code></pre>`;
return `<pre><code ${lineNumbers} ${lineNumberOffset} class="${language}">${code}</code></pre>`;
};
}

34
test/test-markdown.html
View File

@@ -274,6 +274,13 @@
```
</script>
</section>
<section data-markdown class="with-offset">
<script type="text/template">
```[123:]
code
```
</script>
</section>
<section data-markdown class="with-line-highlights-and-lanugage">
<script type="text/template">
```javascript [1,2,3]
@@ -281,6 +288,20 @@
```
</script>
</section>
<section data-markdown class="with-line-highlights-offset-and-lanugage">
<script type="text/template">
```javascript [456: 3,4,5]
code
```
</script>
</section>
<section data-markdown class="with-line-offset-and-lanugage">
<script type="text/template">
```javascript [756:]
code
```
</script>
</section>
<section data-markdown class="with-code-in-fragment">
<script type="text/template">
```js
@@ -460,9 +481,22 @@
assert.strictEqual( deck6.getRevealElement().querySelectorAll( '.with-line-highlights .hljs[data-line-numbers="1,2,3"]' ).length, 1 );
});
QUnit.test( '```[234: ] line offset only', function( assert ) {
assert.strictEqual( deck6.getRevealElement().querySelectorAll( '.with-offset .hljs[data-ln-start-from="123"]' ).length, 1 );
});
QUnit.test( '```javascript [1,2,3] enables line highlights and sets language', function( assert ) {
assert.strictEqual( deck6.getRevealElement().querySelectorAll( '.with-line-highlights-and-lanugage .hljs.javascript[data-line-numbers="1,2,3"]' ).length, 1 );
});
QUnit.test( '```javascript [123: 3,4,5] add line offset and enables line highlights and sets language', function( assert ) {
assert.strictEqual( deck6.getRevealElement().querySelectorAll( '.with-line-highlights-offset-and-lanugage .hljs.javascript[data-line-numbers="3,4,5"]' ).length, 1 );
assert.strictEqual( deck6.getRevealElement().querySelectorAll( '.with-line-highlights-offset-and-lanugage .hljs.javascript[data-ln-start-from="456"]' ).length, 1 );
});
QUnit.test( '```javascript [756:] add line offset and sets no line highlights and sets language', function( assert ) {
assert.strictEqual( deck6.getRevealElement().querySelectorAll( '.with-line-offset-and-lanugage .hljs.javascript[data-ln-start-from="756"]' ).length, 1 );
});
QUnit.test( '```block should allow custom fragment', function( assert ) {
assert.strictEqual( deck6.getRevealElement().querySelectorAll( '.with-code-in-fragment pre.fragment' ).length, 1 );