当サイトを最適な状態で閲覧していただくにはブラウザのJavaScriptを有効にしてご利用下さい。
JavaScriptを無効のままご覧いただいた場合には一部機能がご利用頂けない場合や正しい情報を取得できない場合がございます。

Document

ドキュメント

2-4-3. コンテンツにコードサンプルを挿入する

最終更新日:

KenticoKontentでコードサンプルをモデル化して挿入する方法を学びます。

目次

  • コードサンプルのコンテンツタイプを作成する
  • コンテンツにコードサンプルを挿入する

コードサンプルのコンテンツタイプを作成する

最初のステップは、コードの一部にコンテンツタイプを作成することです。

  1. アプリのメニューから Content modelsを選択します。

  2. Create newをクリックします。

  3. コンテンツタイプ名にCode sampleと入力します。

  4. コードそのものを表すText要素を追加します。

    1. 名前をCodeとします。
    2. 必須項目にします。
  5. コードのプログラミング言語を選択するための複数選択要素を追加します。

    1. 名前をLanguageとします。
    2. サポートしたいすべてのプログラミング言語のオプションを追加します。
    3. 要素のオプションがラジオボタンで表示されるように設定します。
    4. 必須にします。
  6. Save changesをクリックします。

下の図のような結果になります。

code-sample-type.png

コンテンツにコードサンプルを挿入する

コードサンプルを定義したら、それをコンポーネントとしてテキストに追加することができます。

  1. アプリのメニューからContent & Assetsを選択します。
  2. リッチテキスト要素のあるコンテンツアイテムを開きます。
  3. リッチテキストの中で、コードを挿入したい場所にカーソルを置きます。
  4. エディタのツールバーでInsert...をクリックし、Insert new componentをクリックします。
  5. コンテンツタイプのリストからCode sampleを選択します。
  6. 2つの要素を入力します。

編集中のアイテムの中に、コードサンプルがコンポーネントとして存在するようになります。

単品使いから再利用へ

作成したコンポーネントのコンテンツを後で別の用途に使用する場合は、Reuse as content itemをクリックしてコンテンツアイテムに変換することができます。この変換は元に戻すことができません。誤って変換してしまった場合は、新しいアイテムをアーカイブして、コンポーネントを作り直すことができます。

コードの入力が終わった後、コンテンツアイテムの編集を続けることができます。すべての変更は自動的に保存されます。

ComponentinRichtext.png

次のステップ

単発でコードサンプルを作成することも、必要に応じて複数の場所で再利用することもできます。いずれにしても、コードサンプルがテキスト内に正しく表示されるようにし、シンタックスハイライトを追加して読みやすさを向上させる必要があります。

原文:https://docs.kontent.ai/tutorials/write-and-collaborate/structure-your-content/insert-code-samples-example