Reveal.jsプレゼンテーションのバージョン切り替えメモ(3->4)
sphinx-revealjs の
前提環境
sphinx-revealjsのデモプレゼンテーションを いじる 3.x系は
3.9.2 4.x系は
4.1.0
前提として
Reveal.jsの
コンバート勘所
基本的なファイル指定
プロジェクト管理の
以前は、css , js がdist に
-<link rel="stylesheet" href="_static/reveal.js-3.9.2/css/reveal.css" type="text/css" />
-<link rel="stylesheet" href="_static/reveal.js-3.9.2/css/theme/black.css" type="text/css" />
+<link rel="stylesheet" href="_static/reveal.js-4.1.0/dist/reveal.css" type="text/css" />
+<link rel="stylesheet" href="_static/reveal.js-4.1.0/dist/theme/black.css" type="text/css" />
-<script src="_static/reveal.js-3.9.2/js/reveal.js"></script>
+<script src="_static/reveal.js-4.1.0/dist/reveal.js"></script>
印刷用CSSの指定が不要に
dist/reveal.css にcss/print.pdf.css などがcss フォルダを
-<!-- Printing and PDF exports -->
-<script>
-┆ ┆ var link = document.createElement( "link" );
-┆ ┆ link.rel = "stylesheet";
-┆ ┆ link.type = "text/css";
-┆ ┆ if (window.location.search.match( /print-pdf/gi )) {
-┆ ┆ ┆ ┆ link.href = "_static/revealjs/css/print/pdf.css";
-┆ ┆ } else {
-┆ ┆ ┆ ┆ link.href = "_static/revealjs/css/print/paper.css";
-┆ ┆ }
-┆ ┆ document.getElementsByTagName( "head" )[0].appendChild( link );
-</script>
プラグインの利用方法の変化
プラグイン自体がplugin フォルダに
以前は、Reveal.initialize() の
+<script src="_static/reveal.js-4.1.0/plugin/notes/notes.js"></script>
<script>
var revealjsConfig = {
- dependencies: []
+ plugins: []
};
- revealjsConfig.dependencies.push({
- src: "_static/reveal.js-3.9.2/plugin/notes/notes.js",
- async: true,
- });
+ revealjsConfig.plugins.push(RevealNotes);
Reveal.initialize(revealjsConfig);
</script>
余談
しれっと
Highlightモジュール用の CSSが プラグイン側に 引っ越してます
sphinx-revealjs視点での感覚
コアファイルに
問題は
パスのみを
既存の方式か、ESモジュール形式か
Sphinxの
既存の
方 式 <script>にファイル指定が 出来るので、 他の jsと 読み込み周りの 挙動に 差が 発生しない クラス名が
グローバルで 固定の ため、 ユーザー設定側で 正しい ものを 指定しないと いけない
ESモジュール形式
クラス名を
勝手に 決められる 可能性が ある （ import構文で好きに 決めて 良いかもしれない） .esm.jsは完全に 別指定しないと いけない
振る
あとがき
見た
後は、