コードブロックについて

Webflowでは、コードブロックを使用すると、さまざまなプログラミング言語でフォーマットされたコードスニペットを表示できます。

今回はコードブロックの使い方やその機能についてご紹介します。

‍

重要

コードブロックはコードを実行しません。

サイトにカスタムコードを追加する場合は、埋め込み要素に関するレッスンをご覧ください。

‍

コードブロックを追加および編集する方法

サイトにコードブロック要素を追加するには

1. コードブロックに表示したいコードをコピーします
2. Add panelを開く>Advanced
3. code blockをキャンバス、リッチテキスト要素、またはCMSのリッチテキストフィールドにドラッグします。
4. コードエディタにコードを貼り付けます
5. Save & closeをクリックします

注記

コードブロック要素はほとんどのプログラミング言語をサポートしていますが、すべての言語を網羅しているわけではありません。

たとえば、コードブロックは C++ や GraphQL をサポートしていません。

サポートされている言語の完全なリストは、Element settings panel>Code block settings>Languageで確認できます。

コードブロック内に表示されているコードを編集するには、キャンバス上のコードブロックを選択し、設定の「歯車」アイコンをクリックして、「Open code editor」をクリックします。

‍Element settings panel>Code block settingsからコードエディターを起動することもできます。

‍

また、コードブロック要素内のコードは 10,000 文字を超えることはできません。

表示するコードが長い場合は、サードパーティツールを使用してコードを縮小するか、複数のコードブロック要素に分割することができます。

‍

コードブロックの設定

キャンバスにコードブロックを追加すると、Element settings panel>Code block settingsに次の設定が表示されます。

• Language- 要素内のコードに適用される強調表示構文を決定します。コードブロックは、貼り付けたコードのプログラミング言語を自動的に認識しますが、必要に応じて言語を調整できます。
• Theme-明るいlightテーマと暗いdarkテーマをサポート
• Show line numbers- コードの各行の横に行番号を表示するかどうかを決定します。

‍

コードブロックのスタイル設定方法

デフォルトでは、コードブロックは親要素の幅全体を占めます。

他の要素と同様に、Style panel でコードブロックのスタイルを設定できます。(サイズや間隔のプロパティなどを設定するなど)

ただし、タイポグラフィや背景のプロパティを変更することはできません。

‍

いかがでしたでしょうか。コードブロックを有効活用して、ぜひWebflowでの開発に役立ててください。

‍