久しぶりにReveal.jsでマークダウンスライドを作っていて、BudouXを組み込めたら便利そうに思ったので、使えるか試してみました。動作するところまで確認できたので、結果を記載します。

コード

以下、Reveal.jsのindex.htmlのコードの抜粋です。

  • index.html

<body>
    <div class="reveal">
            <div class="slides" style="text-align:left;">
            <section data-markdown="index.md" data-separator="^\n---\n$" data-separator-vertical="^\n--\n$" data-notes="^Note:" data-charset="utf-8"></section>
            </div>
  </div>        
  <script src="/dist/reveal.js"></script>
  <script src="/plugin/zoom/zoom.js"></script>
  <script src="/plugin/notes/notes.js"></script>
  <script src="/plugin/search/search.js"></script>
  <script src="/plugin/markdown/markdown.js"></script>
  <script src="/plugin/highlight/highlight.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/marked/marked.min.js"></script>
  <script src="https://unpkg.com/budoux/bundle/budoux-ja.min.js"></script>
  <script>
   var renderer = new marked.Renderer();
   renderer.heading = function(text, level, raw, slugger)  {
    if (this.options.headerIds) {
     return '<h'
      + level
      + ' id="'
      + this.options.headerPrefix
      + slugger.slug(raw)
      + '"><budoux-ja>'
      + text
      + '</budoux-ja></h'
      + level
      + '>\n';
     }
     // ignore IDs
     return '<h' + level + '><budoux-ja>' + text + '</budoux-ja></h' + level + '>\n';
    };

   renderer.paragraph = function(text)  {
    return `
    <p>
     <budoux-ja>
     ${text}
     </budoux-ja>
    </p>\n`;    
   };   
   renderer.listitem = function(text) {
       return '<li><budoux-ja>' + text + '</budoux-ja></li>\n';
     }

   // Also available as an ES module, see:
   // https://revealjs.com/initialization/
   Reveal.initialize({
    controls: true,
    progress: true,
    center: true,
    hash: true,
    // Learn about plugins: https://revealjs.com/plugins/
    plugins: [ RevealZoom, RevealNotes, RevealSearch, RevealMarkdown, RevealHighlight ],
    markdown: {
        renderer : renderer
      }
   });
  </script>
 </body>

説明

何点か補足で説明します。

  • marked.js の外部スクリプトを追加
    var renderer = new marked.Renderer(); で定義エラーとなったので、

    <script src="https://cdn.jsdelivr.net/npm/marked/marked.min.js"></script>
    を追加しています。

  • rendererの実装
    マークダウンの構文処理に<budoux-ja >タグを挟みこめれば動作しそうに思いましたので、rendererの関係ありそうなfunctionを拡張しています。marked/Renderer.js at master markedjs/marked を見たら、元々の処理とタグの差し込みが必要そうな箇所がわかりました。

  • budouxの外部スクリプトを追加
    <budoux-ja >を使用するため、budouxの外部スクリプトを追加しました。 

    <script src="https://unpkg.com/budoux/bundle/budoux-ja.min.js"></script>

適用して思ったこと

  • ムダに改行を入れている箇所に気づく。**
    レイアウト調整のためにムダ改行を入れていた箇所に気づきます。
    段落的に意味がある箇所で明示的に改行を入れるのが良さそうに思いました。

  • 元々のスタイルシート含めた調整が必要そう
    コードで記載している処理だと、個人で適用していたスタイルが解除されてしまう箇所がありました。
    functionの拡張の仕方を工夫するか、スタイルシートの定義の修正が必要そうです。

  • 最大画面サイズで良い感じ文字を折り返してもらう
    Reveal.jsの元々のスタイルシート設定に起因しそうですが、折り返し具合を確認するために、画面サイズを小さくしてみましたが、文字サイズも画面サイズに合わせて縮小されました。
    最大文字サイズでの折り返しのポイントが変わったのは確認できたので、最大文字サイズでの調整のようとで使うのがよさそうに思いました。
    (画面サイズによって、文字折り返しのポイントに差が出なかった。)

参考

以下、記事作成中に読んでいた文書リンクになります。

以上です。

コメント

カテゴリー

最近の投稿