標準
カスタムブロック
定形入力
Markdownエディタ
<!-- mt-beb --><h1>カスタムブロック</h1><!-- /mt-beb --><!-- mt-beb --><p>カスタムブロックを定義することができます。<br><br>カスタムブロックではJavaScriptを利用した表現も実現することもできますが、JavaScriptはiframeのサンドボックス内で実行されるため、MovableType.netのようなサービス型のCMSでも利用することができます。<br><br>ここでは3つの例を紹介します。</p><!-- /mt-beb --><!-- mt-beb --><h2>画像ギャラリー</h2><!-- /mt-beb --><!-- mt-beb t="custom-gallery" h='<!-- mt-beb t="core-image" --><p><img src="/mt-block-editor/demo/images/custom-block/slide1.png" style="max-width:100%;height:auto"/></p><!-- /mt-beb --><!-- mt-beb t="core-image" --><p><img src="/mt-block-editor/demo/images/custom-block/slide2.png" style="max-width:100%;height:auto"/></p><!-- /mt-beb --><!-- mt-beb t="core-image" --><p><img src="/mt-block-editor/demo/images/custom-block/slide3.png" style="max-width:100%;height:auto"/></p><!-- /mt-beb -->' --> <div class="swiper-container"> <div class="swiper-wrapper"> <div class="swiper-slide"><img src="https://movabletype.github.io/mt-block-editor/demo/images/custom-block/slide1.png" style=""></div><div class="swiper-slide"><img src="https://movabletype.github.io/mt-block-editor/demo/images/custom-block/slide2.png" style=""></div><div class="swiper-slide"><img src="https://movabletype.github.io/mt-block-editor/demo/images/custom-block/slide3.png" style=""></div> </div> <div class="swiper-pagination"></div> <div class="swiper-button-prev"></div> <div class="swiper-button-next"></div> </div> <!-- /mt-beb --><!-- mt-beb --><h2>ソースコードブロック</h2><!-- /mt-beb --><!-- mt-beb t="custom-syntax_highlighting" h='<!-- mt-beb t="sixapart-textarea" m='{"blockElement":"pre","formatter":"none","text":"&lt;html\n &lt;head&gt;\n &lt;script type=\"module\"&gt;\n // こんにちはMTBlockEditor\n MTBlockEditor.apply(id: \"text\");\n &lt;/script&gt;\n &lt;/head&gt;\n&lt;/html&gt;","label":"ソースコード","className":"source"}' --><pre class="source">&lt;html
 &lt;head&gt;
 &lt;script type=&quot;module&quot;&gt;
 // こんにちはMTBlockEditor
 MTBlockEditor.apply(id: &quot;text&quot;);
 &lt;/script&gt;
 &lt;/head&gt;
&lt;/html&gt;</pre><!-- /mt-beb --><!-- mt-beb t="sixapart-select" m='{"options":"html\njavascript","blockElement":"p","text":"html","label":"言語","className":"language"}' --><p class="language">html</p><!-- /mt-beb -->' --><pre><code class="html"><html <head> <script type="module"> // こんにちはMTBlockEditor MTBlockEditor.apply(id: "text"); </script> </head> </html></code></pre><!-- /mt-beb --><!-- mt-beb --><h2>エクセルファイルの読み込み</h2><!-- /mt-beb --><!-- mt-beb t="custom-excel" h='' --><table><thead><tr><th>ヘッダー1</th><th>ヘッダー2</th></tr></thead><tbody><tr><td>値1</td><td>値2</td></tbody></table><!-- /mt-beb -->