2-4-3. コンテンツにコードサンプルを挿入する
最終更新日:
KenticoKontentでコードサンプルをモデル化して挿入する方法を学びます。
目次
- コードサンプルのコンテンツタイプを作成する
- コンテンツにコードサンプルを挿入する
コードサンプルのコンテンツタイプを作成する
最初のステップは、コードの一部にコンテンツタイプを作成することです。
-
アプリのメニューから Content modelsを選択します。
-
Create newをクリックします。
-
コンテンツタイプ名にCode sampleと入力します。
-
コードそのものを表すText要素を追加します。
- 名前をCodeとします。
- 必須項目にします。
-
コードのプログラミング言語を選択するための複数選択要素を追加します。
- 名前をLanguageとします。
- サポートしたいすべてのプログラミング言語のオプションを追加します。
- 要素のオプションがラジオボタンで表示されるように設定します。
- 必須にします。
-
Save changesをクリックします。
下の図のような結果になります。
コンテンツにコードサンプルを挿入する
コードサンプルを定義したら、それをコンポーネントとしてテキストに追加することができます。
- アプリのメニューからContent & Assetsを選択します。
- リッチテキスト要素のあるコンテンツアイテムを開きます。
- リッチテキストの中で、コードを挿入したい場所にカーソルを置きます。
- エディタのツールバーでInsert...をクリックし、Insert new componentをクリックします。
- コンテンツタイプのリストからCode sampleを選択します。
- 2つの要素を入力します。
編集中のアイテムの中に、コードサンプルがコンポーネントとして存在するようになります。
単品使いから再利用へ
作成したコンポーネントのコンテンツを後で別の用途に使用する場合は、Reuse as content itemをクリックしてコンテンツアイテムに変換することができます。この変換は元に戻すことができません。誤って変換してしまった場合は、新しいアイテムをアーカイブして、コンポーネントを作り直すことができます。
コードの入力が終わった後、コンテンツアイテムの編集を続けることができます。すべての変更は自動的に保存されます。
次のステップ
単発でコードサンプルを作成することも、必要に応じて複数の場所で再利用することもできます。いずれにしても、コードサンプルがテキスト内に正しく表示されるようにし、シンタックスハイライトを追加して読みやすさを向上させる必要があります。
- コードサンプルを表示できるように、リッチテキストの構造を扱う方法をアプリに教えてください。その後、PrismJSのようなシンタックスハイライターを少しだけ振りかけると、より魅力的なものになります。
- リッチテキストでコンテンツアイテムの代わりにコンポーネントを使用するタイミングを知っておきましょう。
- 既存のコンテンツをリンクさせて、ランディングページなどを作ることができます。