Ulyssesの「コードブロック」と「ソースブロック」の違いと使い分け

Ulyssesには「コードブロック」と「ソースブロック」の似たようなマークアップが用意されています。

違いが分からなかったのですが、ぱっと見はどちらも同じようなもので、細かな違いについて調べてみました。

コードブロックとソースブロック

「コードブロック」「ソースブロック」どちらもプログラムのテキスト（ソースコード）を入力するもので、見た目は似ていますが調べてみると使い道がかなり違います。

コードブロックは「コードを表示するために使う」、ソースブロックは「プレビュー時のソース（源）として使う」と覚えておくと混乱しなさそうです。

入力方法の違い

コードブロックの場合は`（グレイヴ・アクセント）または'（シングルクォート）を2個続けて入力します（2個続けずに、テキストを囲んだ場合はブロック化せずに「コード」になります）。

それに対してソースブロックの場合は~（チルダ）を2個続けて入力します（こちらも2個続けずに、テキストを囲んだ場合は「ソース」になります）。

どちらもブロック内でソースコードを入力して、普通にenterだとブロック内で改行しますが、option + enterでブロックの外に出て改行できます。

シンタックスハイライトの違い

ぱっと見どちらもグレー背景になるだけですが、コードブロックの場合はブロックの右上に「</>」の文字が表示されます。

これをクリックするかcommand + enterでポップアップが表示され、ブロック内に記述する言語を検索・選択できます。

ここで例えば「HTML」を選択すると、HTMLに合わせたシンタックスハイライトをしてくれます。

ソースブロックにはこの機能がなく、ハイライトなしでソースコードがそのまま表示されるだけです。

プレビュー画面の違い

プレビューした場合、「コードブロック」はコードがそのまま表示されるのに対して、「ソースブロック」は入力したHTMLが実際にプレビューされた状態で表示されたり、PDFやDOCXの場合は表示されなかったりします。

このようにソースブロックはHTMLのプレビューのための機能です。

YouTubeなどの埋め込みもプレビューできるのか？

ソースブロックにYouTube埋め込みのiframeを入力した場合はどうなるのか気になって試してみました。

上記のように埋め込みコードを入力した状態でプレビューすると「HTML」と「ePub」では表示されて、「PDF」と「DOCX」では表示されませんでした。

投稿時の違い

WordPressに投稿した場合、コードブロックの場合は<pre>と<code>タグで囲まれた状態で投稿されます。

<pre class="wp-block-code"><code>
<!-- ここにコードブロック内の内容がエスケープされた状態で入る -->
</code></pre>

それに対して、ソースブロックの場合は入力したHTMLがそのまま入ります。

そのため、ソースブロックにHTMLを入力して投稿すると、そのHTMLがそのままWordPress上に反映されます。