WebDesigner's Memorandumウェブデザイナーの備忘録

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

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

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

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

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

 コードブロックソースブロック
入力方法`(グレイヴ・アクセント)を2個続けて入力
'(シングルクォート)を2個続けて入力
~(チルダ)を2個続けて入力
シンタックスハイライト×
プレビューの表示入力したコードを字列として表示HTMLの結果が表示される
投稿時の違い

<pre><code>タグで囲まれて、

エスケープされた状態でコードを文字列として投稿

入力したコードがHTMLとしてそのまま投稿される
目的

HTMLに限らず、コードをそのままキレイに記述する目的

HTMLを記述してプレビュー時に実行する目的

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

入力方法の違い

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

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

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

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

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

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

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

シンタックスハイライトの指定

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

シンタックスハイライトの表示

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

プレビュー画面の違い

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

コードブロックとソースブロックのプレビュー違う

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

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

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

ソースブロックにYouTubeの埋め込みを追加

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

YouTube埋め込みのプレビュー

投稿時の違い

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

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

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

HTMLのプレビュー

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

著者について

プロフィール画像

サイトウ マサカズ@31mskz10

1997年生まれ。2016年から専門学校でデザインについて勉強。卒業後は神戸の制作会社「N'sCreates」にウェブデザイナーとして入社。このブログでは自分の備忘録も兼ねて、ウェブに関する記事や制作環境を効率的に行うための記事を書いています。

Twitterをフォロー Facebookでいいね