When Reveal.js meets Franklin.jl
The layouts
To get Reveal.js
to work, these HTML headers and footers are necessary:
To write Reveal Slides in the same way we write Franklin blogs, the first thing first is to set page variables that let blog builder know to render the markdown as Reveal Slides rather than Franklin pages. Currently, I made this happen by manipulating the layout HTLMs of Franklin:
The Functions
I wrapped most commonly used Reveal.js grammars into \(\LaTeX\) like functions in Franklin config.md
:
<!--
############################################
####### Reveal.js Related Functions ########
############################################
-->
\newcommand{\rvsechtml}[2]{
~~~
<section !#1>
#2
</section>
~~~
}
\newcommand{\rvsecmdfranklin}[2]{
~~~<section !#1>~~~
#2
~~~</section>~~~
}
\newcommand{\rvsecmdtext}[2]{
~~~
<section data-markdown !#1>
<script type="text/template">
#2
</script>
</section>
~~~
}
\newcommand{\rvsecmdscript}[2]{
~~~
<section data-markdown !#1>
<script type="text/template">
#2
</script>
</section>
~~~
}
\newcommand{\rvcode}[2]{
~~~
<pre><code data-line-numbers !#1>
~~~
#2
~~~
</code></pre>
~~~
}
\newcommand{\rvdiv}[2]{
~~~<div !#1>~~~
!#2
~~~</div>~~~
}
\newcommand{\rvspan}[2]{
~~~<span !#1>~~~
!#2
~~~</span>~~~
}
\newcommand{\rvp}[2]{
~~~<p !#1>~~~
!#2
~~~</p>~~~
}
\newcommand{\rvli}[2]{
~~~<li !#1>~~~
!#2
~~~</li>~~~
}
\newcommand{\rvfdiv}[2]{
~~~<div class="fragment" data-fragment-index="!#1" align="left" style="margin:0px">~~~
#2
~~~</div>~~~
}
\newcommand{\rvfspan}[2]{
~~~<span class="fragment" data-fragment-index="!#1" align="left" style="margin:0px">~~~
!#2
~~~</span>~~~
}
\newcommand{\rvfp}[2]{
~~~<p class="fragment" data-fragment-index="!#1" align="left" style="margin:0px">~~~
#2
~~~</p>~~~
}
\newcommand{\rvfli}[2]{
~~~<li class="fragment" data-fragment-index="!#1" align="left" style="margin:0px">~~~
#2
~~~</li>~~~
}
\plain{
\newcommand{\rvlovv}[6]{
\rvsecmdfranklin{ }{
~~~
<div style="text-align:left">
~~~
#3
~~~
</div>
<table width="100%" height="650px" border="0">
<tr>
<td width="!#1" height=90% style="padding:0px">
~~~
#4
~~~
</td>
<td width="!#2" height=90% style="padding:0px;padding-left:0.2em">
~~~
#5
~~~
</td>
</tr>
<tr>
<td colspan="1" height=5% style="padding:0px">
<div style="font-size:18px;padding-bottom:-1em">
~~~
#6
~~~
</div>
</td>
</tr>
</table>
~~~
}
}
\newcommand{\rvlovvv}[8]{
\rvsecmdfranklin{ }{
~~~
<div style="text-align:left">
~~~
#4
~~~
</div>
<table width="1400[x" height="650px" border="0">
<tr>
<td width="!#1" height=90% style="padding:0px">
~~~
#5
~~~
</td>
<td width="!#2" height=90% style="padding:0px;padding-left:0.1em">
~~~
#6
~~~
</td>
<td width="!#3" height=90% style="padding:0px;padding-left:0.1em">
~~~
#7
~~~
</td>
</tr>
<tr>
<td colspan="1" height=5% style="padding:0px">
<div style="font-size:18px;padding-bottom:-1em">
~~~
#8
~~~
</div>
</td>
</tr>
</table>
~~~
}}}
Now, I can create Slides the same way I wrote Franklin Blogs. e.g.:
I could get :the demo slide
That is somewhat smooooth ㊗️!
The futures
But is it necessary? Wouldn't it more efficient (and/or more scalable) that I just learn HTML directly?
There are several pros for this wrapper:
Raw HTML slides just contains too many tags
<foo><bar></bar></foo>
, these would not help me focus on the contents;Using this wrapper, I could manage the Slides.md in the same way of the Blogs.md, so convenient;
This wrapper is compatible with the rest functions I defined for better writing blogs, I don't have to swith my mind, so smooth;
We should develop a new markdown parser (using pure julia), define the specific structures and keywords for controlling the behavior of each slide. In that way, maybe we could just write markdown like this:
\+\+\+
title="FakeMdSlideGrammar"
theme="SomeTheme"
footer="SomeFooter"
\+\+\+
==P==
# Slide 1
<!--| background: #123456 |-->
- fragment 1 <!--| fragment:fade-out; index:1 |-->
- fragment 2 <!--| fragment:fade-in; index:2 |-->
--F--
<!-- to wrap several items into one fragment -->
<!-- | fragment: fade-in; index:3 | -->
- I am part of fragment 3
**I am also part of fragment 3**
>So am I
```
Me Too~
```
--F--
==P==
And get beautiful slides.
This would need fully understand of how Markdown.jl
, and Franklin.jl
works, thus is a looooooog journey for me.
I hope I could make it (when I have enough time 😿)
:x DemoRevealCode
+++
title="Demo"
revealslide=true
revealtheme="simple"
+++
~~~
<div class="slides">
~~~
\rvsecmdfranklin{ }{
## \cnote{Thank You!}
\hwarn{Follow ME}{
\br{2}
\Shack{My GitHub}: [https://github.com/SongtaoGui](https://github.com/SongtaoGui)
\br{2}
\Snote{My Blog}: [https://songtaogui.github.io/](https://songtaogui.github.io/)
\br{2}
}
}
~~~
</div>
~~~