Ulyssesの「コードブロック」と「ソースブロック」の違いと使い分け
Ulyssesには「コードブロック」と「ソースブロック」の似たようなマークアップが用意されています。
違いが分からなかったのですが、ぱっと見はどちらも同じようなもので、細かな違いについて調べてみました。
コードブロックとソースブロック
「コードブロック」「ソースブロック」どちらもプログラムのテキスト（ソースコード）を入力するもので、見た目は似ていますが調べてみると使い道がかなり違います。
| コードブロック | ソースブロック | |
|---|---|---|
| 入力方法 | `（グレイヴ・アクセント）を2個続けて入力 '（シングルクォート）を2個続けて入力 | ~（チルダ）を2個続けて入力 |
| シンタックスハイライト | ○ | × |
| プレビューの表示 | 入力したコードを字列として表示 | HTMLの結果が表示される |
| 投稿時の違い |
エスケープされた状態でコードを文字列として投稿 | 入力したコードがHTMLとしてそのまま投稿される |
| 目的 | HTMLに限らず、コードをそのままキレイに記述する目的 | HTMLを記述してプレビュー時に実行する目的 |
コードブロックは「コードを表示するために使う」、ソースブロックは「プレビュー時のソース（源）として使う」と覚えておくと混乱しなさそうです。
入力方法の違い
コードブロックの場合は`（グレイヴ・アクセント）または'（シングルクォート）を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上に反映されます。
