Skip to content

Commit cbd128c

Browse files
sokotimsokotim
authored
Add filter revealjs-codeblock (#103)
* Add revealjs-codeblock * Use single quotes for strings * Use underscores for ignored variables in loops * Rename tag_params to tag_attributes * Use local variables * Ignore numberlines classes if more than one present * Modify sample.md and expected.html * Modify README.md * Add header
1 parent 6865f0e commit cbd128c

File tree

6 files changed

+654
-0
lines changed

6 files changed

+654
-0
lines changed

‎revealjs-codeblock/Makefile

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,6 @@
1+
DIFF ?= diff --strip-trailing-cr -u
2+
3+
test:
4+
@pandoc --lua-filter=revealjs-codeblock.lua sample.md -t revealjs | $(DIFF) expected.html -
5+
6+
.PHONY: test

‎revealjs-codeblock/README.md

Lines changed: 43 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,43 @@
1+
# revealjs-codeblock
2+
3+
This filter overwrites the code block HTML for `revealjs` output to
4+
enable the [code presenting features](https://revealjs.com/code/) of
5+
[reveal.js](https://revealjs.com/). A custom template is required to
6+
include [highlight.js](https://highlightjs.org/) (which [comes with
7+
reveal.js](https://revealjs.com/code/#theming) as a plugin).
8+
9+
## Features
10+
11+
The filter passes the code block attributes to reveal.js. This enables
12+
the following reveal.js features:
13+
14+
- [Line Numbers &
15+
Highlights](https://github.com/hakimel/reveal.js/tree/master/plugin/highlight)
16+
and [Step-by-step
17+
Highlights](https://revealjs.com/code/#step-by-step-highlights) via
18+
the `data-line-numbers` attribute. (`.numerLines` and
19+
`.number-lines` classes are converted for compatibility.)
20+
- [Auto-Animation](https://revealjs.com/auto-animate/#example%3A-animating-between-code-blocks)
21+
of code blocks with line numbers and a `data-id`. (The slide
22+
headings need the `data-auto-animate` attribute.)
23+
24+
## Usage
25+
26+
You have to [include highlight.js](https://revealjs.com/code/#theming)
27+
in your own custom template or use the provided `template.html`. It has
28+
two additional variables:
29+
30+
- `highlightjs` to opt in highlight.js (default to false)
31+
- `highlightjs-theme` to select a theme. Currently reveal.js
32+
[comes](https://github.com/hakimel/reveal.js/tree/master/plugin/highlight)
33+
with `monokai` (default) and `zenburn`.
34+
35+
```bash
36+
$ pandoc sample.md -o sample.html -t revealjs -L revealjs-codeblock.lua \
37+
--template template.html -V highlightjs -V highlightjs-theme:zenburn
38+
```
39+
40+
## Example
41+
42+
See `sample.md` for a recreation of the [code presentation
43+
demo](https://revealjs.com/#/4).

‎revealjs-codeblock/expected.html

Lines changed: 65 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,65 @@
1+
<section id="pretty-code" class="slide level1" data-auto-animate="">
2+
<h1 data-auto-animate="">Pretty Code</h1>
3+
<pre data-id="code-animation"><code class="jsx" data-line-numbers="">import React, { useState } from 'react';
4+
5+
function Example() {
6+
const [count, setCount] = useState(0);
7+
8+
return (
9+
...
10+
);
11+
}</code></pre>
12+
<p>Example courtesy of <a href="https://revealjs.com/#/4">reveal.js</a>.</p>
13+
</section>
14+
<section id="even-prettier-animations" class="slide level1" data-auto-animate="">
15+
<h1 data-auto-animate="">Even Prettier Animations</h1>
16+
<pre data-id="code-animation"><code class="jsx" data-line-numbers="|4,8-11|17|22-24">import React, { useState } from 'react';
17+
18+
function Example() {
19+
const [count, setCount] = useState(0);
20+
21+
return (
22+
<div>
23+
<p>You clicked {count} times</p>
24+
<button onClick={() => setCount(count + 1)}>
25+
Click me
26+
</button>
27+
</div>
28+
);
29+
}
30+
31+
function SecondExample() {
32+
const [count, setCount] = useState(0);
33+
34+
return (
35+
<div>
36+
<p>You clicked {count} times</p>
37+
<button onClick={() => setCount(count + 1)}>
38+
Click me
39+
</button>
40+
</div>
41+
);
42+
}</code></pre>
43+
</section>
44+
<section id="test-line-number-classes" class="slide level1">
45+
<h1>test line number classes</h1>
46+
<pre ><code >unnumbered</code></pre>
47+
<pre ><code data-line-numbers="">{.numberLines}</code></pre>
48+
<pre ><code data-line-numbers="">{.number-lines}</code></pre>
49+
<pre ><code data-line-numbers="">{.numberLines .number-lines}</code></pre>
50+
</section>
51+
<section id="test-data-line-numbers-attribute" class="slide level1">
52+
<h1>test data-line-numbers attribute</h1>
53+
<pre ><code data-line-numbers="1">{data-line-numbers="1"}</code></pre>
54+
<pre ><code data-line-numbers="1">{.numberLines data-line-numbers="1"}</code></pre>
55+
</section>
56+
<section id="test-code-tag-attributes" class="slide level1">
57+
<h1>test code tag attributes</h1>
58+
<pre ><code class="html another-class">{.html .another-class}</code></pre>
59+
<pre ><code data-trim="" some-other-attribute="" style="border: 1px solid yellow;">{data-trim="" some-other-attribute="" style="border: 1px solid yellow;"}</code></pre>
60+
</section>
61+
<section id="test-pre-tag-attributes" class="slide level1">
62+
<h1>test pre tag attributes</h1>
63+
<pre id="code"><code >{#code}</code></pre>
64+
<pre data-id="code-animate"><code >{data-id="code-animate"}</code></pre>
65+
</section>

‎revealjs-codeblock/revealjs-codeblock.lua

Lines changed: 72 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,72 @@
1+
--[[
2+
revealjs-codeblock - enable reveal.js code presentation features
3+
4+
Copyright © 2020 Tim Sokollek
5+
6+
Permission to use, copy, modify, and/or distribute this software for any
7+
purpose with or without fee is hereby granted, provided that the above
8+
copyright notice and this permission notice appear in all copies.
9+
10+
THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES
11+
WITH REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF
12+
MERCHANTABILITY AND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR
13+
ANY SPECIAL, DIRECT, INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES
14+
WHATSOEVER RESULTING FROM LOSS OF USE, DATA OR PROFITS, WHETHER IN AN
15+
ACTION OF CONTRACT, NEGLIGENCE OR OTHER TORTIOUS ACTION, ARISING OUT OF
16+
OR IN CONNECTION WITH THE USE OR PERFORMANCE OF THIS SOFTWARE.
17+
]]
18+
local function is_numberlines_class(class)
19+
return class == 'numberLines' or class == 'number-lines'
20+
end
21+
22+
local function is_pre_tag_attribute(attribute)
23+
return attribute == 'data-id'
24+
end
25+
26+
local function is_data_line_number_in_attributes(attributes)
27+
for _, attribute in ipairs(attributes) do
28+
if attribute[1] == 'data-line-numbers' then return true end
29+
end
30+
return false
31+
end
32+
33+
function CodeBlock(block)
34+
if FORMAT == 'revealjs' then
35+
local css_classes = {}
36+
local pre_tag_attributes = {}
37+
local code_tag_attributes = {}
38+
39+
for _, class in ipairs(block.classes) do
40+
if is_numberlines_class(class) then
41+
if not is_data_line_number_in_attributes(block.attributes) then
42+
table.insert(block.attributes, {'data-line-numbers', ''})
43+
end
44+
else
45+
table.insert(css_classes, class)
46+
end
47+
end
48+
if block.identifier ~= '' then
49+
table.insert(pre_tag_attributes,
50+
string.format('id="%s"', block.identifier))
51+
end
52+
if next(css_classes) then
53+
class_attribute = string.format('class="%s"',
54+
table.concat(css_classes, ' '))
55+
table.insert(code_tag_attributes, class_attribute)
56+
end
57+
for _, attribute in ipairs(block.attributes) do
58+
attribute_string = string.format('%s="%s"', attribute[1],
59+
attribute[2])
60+
if is_pre_tag_attribute(attribute[1]) then
61+
table.insert(pre_tag_attributes, attribute_string)
62+
else
63+
table.insert(code_tag_attributes, attribute_string)
64+
end
65+
end
66+
local html = string.format('<pre %s><code %s>%s</code></pre>',
67+
table.concat(pre_tag_attributes, ' '),
68+
table.concat(code_tag_attributes, ' '),
69+
block.text)
70+
return pandoc.RawBlock('html', html)
71+
end
72+
end

‎revealjs-codeblock/sample.md

Lines changed: 99 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,99 @@
1+
Pretty Code {#pretty-code data-auto-animate=""}
2+
===========
3+
4+
``` {.jsx .numberLines data-id="code-animation"}
5+
import React, { useState } from 'react';
6+
7+
function Example() {
8+
const [count, setCount] = useState(0);
9+
10+
return (
11+
...
12+
);
13+
}
14+
```
15+
16+
Example courtesy of [reveal.js](https://revealjs.com/#/4).
17+
18+
Even Prettier Animations {#even-prettier-animations data-auto-animate=""}
19+
========================
20+
21+
``` {.jsx data-line-numbers="|4,8-11|17|22-24" data-id="code-animation"}
22+
import React, { useState } from 'react';
23+
24+
function Example() {
25+
const [count, setCount] = useState(0);
26+
27+
return (
28+
<div>
29+
<p>You clicked {count} times</p>
30+
<button onClick={() => setCount(count + 1)}>
31+
Click me
32+
</button>
33+
</div>
34+
);
35+
}
36+
37+
function SecondExample() {
38+
const [count, setCount] = useState(0);
39+
40+
return (
41+
<div>
42+
<p>You clicked {count} times</p>
43+
<button onClick={() => setCount(count + 1)}>
44+
Click me
45+
</button>
46+
</div>
47+
);
48+
}
49+
```
50+
51+
test line number classes
52+
========================
53+
54+
unnumbered
55+
56+
``` {.numberLines}
57+
{.numberLines}
58+
```
59+
60+
``` {.number-lines}
61+
{.number-lines}
62+
```
63+
64+
``` {.numberLines .number-lines}
65+
{.numberLines .number-lines}
66+
```
67+
68+
test data-line-numbers attribute
69+
================================
70+
71+
``` {data-line-numbers="1"}
72+
{data-line-numbers="1"}
73+
```
74+
75+
``` {.numberLines data-line-numbers="1"}
76+
{.numberLines data-line-numbers="1"}
77+
```
78+
79+
test code tag attributes
80+
========================
81+
82+
``` {.html .another-class}
83+
{.html .another-class}
84+
```
85+
86+
``` {data-trim="" some-other-attribute="" style="border: 1px solid yellow;"}
87+
{data-trim="" some-other-attribute="" style="border: 1px solid yellow;"}
88+
```
89+
90+
test pre tag attributes
91+
=======================
92+
93+
``` {#code}
94+
{#code}
95+
```
96+
97+
``` {data-id="code-animate"}
98+
{data-id="code-animate"}
99+
```

0 commit comments

Comments
 (0)