code表示（コードの説明時などに使用） - MT-t サポート

ＨＯＭＥ > 記事の編集方法 > code表示（コードの説明時などに使用）

code表示（コードの説明時などに使用）

2013年07月07日

下記のようにコード説明ができます。

HTML、CSS、javascript のコードに対応しており、
タグごとに自動で色分けされますので、説明時に便利です。
下記例では、その３種類を載せました。

他の機能として、
・初期値の行を設定（下記の例 HTMLバージョンに使用）
・行のハイライト表示（下記の例 CSSバージョンに使用）
・枠内の余白部分をダブルクリックすることでコードの全選択が可能です。（コピペ時に便利）

 ＨＯＭＥ > 
 お客様の声 > 
お客様の声のテスト記事

ＨＯＭＥ > お客様の声 > お客様の声のテスト記事

/* ____ テキスト設定 ____ */
em {
font-style: normal;
font-weight: bold;
}

jQuery('#slider0').after('
').cycle({
fx : 'all',
speed : 750,
timeout : 4000,
prev : '#slider0-prev',
next : '#slider0-next',
pause : 1,
easing : 'swing',
cleartype : true
});

設定方法

対象のコード部分を pre コードで囲むことで、
その中のコードがタグとして動作せずに文字列として出力されます。

例：
（下記例ではコードとして動作させないようにするため、<>を全角の＜＞で記述しています。実際には半角文字で使用してください。）

＜pre class="brush: html;"＞
HTMLコードの場合
＜/pre＞

＜pre class="brush: css;"＞
CSSコードの場合
＜/pre＞

＜pre class="brush: javascript;"＞
javascriptコードの場合
＜/pre＞

初期の行数を決める場合は、下記のように記述追加します。（例：５行目を開始とする場合）
＜pre class="brush: html; first-line: 5;"＞

指定の行をハイライトにする場合はこのように記述します。（例：3,4行目をハイライト）
＜pre class="brush: css; highlight:[3,4];"＞

[http://] に自動リンクされるのを解除したい場合は下記のように追記してください。
＜pre class="brush: html; auto-links: false;"＞

回答は２営業日以内にメールでさしあげます。もし回答が届かない場合はメールが迷惑ボックスに入っているか、何らかの原因で受信できていない可能性があります。その際はお手数ですが再度ご相談フォームよりご入力ください。

よりスムースなサポートのために下記のアプリのインストールをお願いします。
Screen Capture (by Google)
Chromeの右上にアイコンが表示されます。そこから簡単に画面撮影でき、画像として保存することが可能です。ご相談の際、画面の画像を添付していただけると助かります。（詳しい使い方はこちら）

４ファイル以上添付したい方はこちらをお読みください。