テキストノートの本文にコード用のエリアを埋め込む

広告
eyecatch

テキストノートでは本文中にプログラムのコードなどを記述する時に使いやすいエリアを埋め込むことができます。このエリアは背景色が黒、テキスト色が白となりタブを使うこともできます。またノートを公開後はシンタックスハイライトも自動的に行われます。ここではテキストノートの本文にコード用のエリアを埋め込む方法について解説します。

コードを用のエリアを埋め込む

それでは実際に試してみます。テキストノートの作成画面を表示してください。

コードを用のエリアを埋め込む(1)

本文でEnterキーなどを押すと新しい段落が表示されますが、その時表示される「+」をクリックしてください。

コードを用のエリアを埋め込む(2)

コードを用のエリアを埋め込む(3)

次の4つのアイコンが表示されます。ツイートなどを埋め込む場合は「embed code」アイコンをクリックしてください。

コードを用のエリアを埋め込む(4)

コード記述用のエリアが表示されます。

コードを用のエリアを埋め込む(5)

このエリアではタブを使うこともできますし、Enterキーを押した時に段落が変わるのではなく単に改行されます。

コードを用のエリアを埋め込む(6)

このエリアでの入力を終了するには、Enterキーを二回連続で押してください。

コードを用のエリアを埋め込む(7)

では本文にコードのエリアが埋め込まれたノートを投稿してみます。投稿されたノートはタイムラインに表示されるとき、コードのエリアは表示されませんが記述されたコードそのものは表示されています。

コードを用のエリアを埋め込む(8)

コードを用のエリアを埋め込む(9)

ノートのタイトルをクリックしてノートの全文を表示すると埋め込まれたコードのエリアが表示されます。作成中は表示されていませんでしたが、ノートを公開するとシンタックスハイライトが自動的に行われました。

コードを用のエリアを埋め込む(10)

コードを用のエリアを埋め込む(11)

-- --

本文中にコード用のエリアを埋め込む手順について解説しました。

( Written by Tatsuo Ikura+ )

関連記事 (一部広告含む)
Profile
profile_img

著者 / TATSUO IKURA

初心者~中級者の方を対象としたプログラミング方法や開発環境の構築の解説を行うサイトの運営を行っています。