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

URL: https://webrandum.net/ulysses-code-source/
公開日: 2022-05-27
更新日: 2022-05-26
カテゴリー: ライティング
タグ: Ulysses
出典: Webrandum（著者: サイトウ マサカズ）

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

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

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

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

|  | コードブロック | ソースブロック |
| --- | --- | --- |

| 入力方法 | `（グレイヴ・アクセント）を2個続けて入力 '（シングルクォート）を2個続けて入力 | ~（チルダ）を2個続けて入力 |
| --- | --- | --- |

| シンタックスハイライト | ○ | × |
| --- | --- | --- |

| プレビューの表示 | 入力したコードを字列として表示 | HTMLの結果が表示される |
| --- | --- | --- |

| 投稿時の違い | <pre>と<code>タグで囲まれて、 エスケープされた状態でコードを文字列として投稿 | 入力したコードがHTMLとしてそのまま投稿される |
| --- | --- | --- |

| 目的 | HTMLに限らず、コードをそのままキレイに記述する目的 | HTMLを記述してプレビュー時に実行する目的 |
| --- | --- | --- |

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

### 入力方法の違い

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

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

![コードブロックとソースブロック](https://webrandum.net/mskz/wp-content/uploads/2022/05/image_1-14.png)

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

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

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

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

![シンタックスハイライトの指定](https://webrandum.net/mskz/wp-content/uploads/2022/05/image_2-12.png)

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

![シンタックスハイライトの表示](https://webrandum.net/mskz/wp-content/uploads/2022/05/image_3-10.png)

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

### プレビュー画面の違い

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

![コードブロックとソースブロックのプレビュー違う](https://webrandum.net/mskz/wp-content/uploads/2022/05/image_4-9.png)

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

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

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

![ソースブロックにYouTubeの埋め込みを追加](https://webrandum.net/mskz/wp-content/uploads/2022/05/image_6-8.png)

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

![YouTube埋め込みのプレビュー](https://webrandum.net/mskz/wp-content/uploads/2022/05/image_7-6.png)

### 投稿時の違い

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

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

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

![HTMLのプレビュー](https://webrandum.net/mskz/wp-content/uploads/2022/05/image_5-9.png)

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