ubuntu上でreveal.jsを構築 #Node.js

公式ドキュメントから

apt -y update
apt -y install nodejs npm

reveal.jsのダウンロードと起動

git clone https://github.com/hakimel/reveal.js.git
cd reveal.js && npm install
npm start

エラーがでた場合は以下を実行

cd reveal.js
npm config set unsafe-perm=truesu otheruser
npm i -g puppeteer --unsafe-perm
npm install
npm start

markdownを読み込む

bodyのdiv class="reveal"内で以下のように記述することで、md/slide.mdを読み込んでくれます。

<body>
ここから
<pre style="display:none"><code></code></pre>
<div class="reveal">
  <div class="slides">
    <section data-markdown="md/slide.md" data-separator="^\n---\n$" data-separator-vertical="^\n>>>\n$"></section>
  </div>
</div>

                <script src="dist/reveal.js"></script>
                <script src="plugin/notes/notes.js"></script>
                <script src="plugin/markdown/markdown.js"></script>
                <script src="plugin/highlight/highlight.js"></script>
                <script>
                        // More info about initialization & config:
                        // - https://revealjs.com/initialization/
                        // - https://revealjs.com/config/
                        Reveal.initialize({
                                hash: true,

                                // Learn about plugins: https://revealjs.com/plugins/
                                plugins: [ RevealMarkdown, RevealHighlight, RevealNotes ]
                        });
                </script>
ここまで
</body>

他のホストにも公開する

今のままだと、localhost以外からはアクセスが出来ない。

reveal.js/gulpfile.js

以下のlocalhostを0.0.0.0に変更
変更前

const host = yargs.argv.host || 'localhost'

変更後

const host = yargs.argv.host || '0.0.0.0'

参考文献

https://yoghurt1131.hatenablog.com/entry/2016/02/11/222840
https://mebee.info/2020/03/02/post-5261/
https://qiita.com/t-kusakabe/items/725e7438892bba395062
https://zatsugaku-engineer.com/html-css-javascript/reveal-js/#i-3
https://tech-blog.rakus.co.jp/entry/20191127/tool-introduction/reveal.js?amp=1
https://revealjs.com/markdown/
https://revealjs.com/transitions/
https://revealjs.com/auto-animate/