Cocoonにてクラシックエディタでプログラミングのコードをうまくハイライトさせる方法

Cocoon

クラシックエディタを使用すると、Cocoonでプログラミングのコードを上手くハイライトさせることができませんでした。

クラシックエディタを使用している環境でプログラミングのコードをハイライトさせる方法を紹介します。

Cocoonの設定

まず普通にCocoonのハイライト設定を行っていきます。

Cocoon設定から「コード」を選択してください。「ソースコードをハイライト表示」にチェックを入れます。

行番号を表示させたい場合は「行番号表示」にチェックを入れます。

テキストエディタにpreタグだけを設置

本来は、ビジュアルエディタにして、preタグでコードを囲むことで、コードのハイライトが可能になります。

しかしクラシックエディタを使用していると、コードのハイライト表示が行われません。

<pre>
<html>
<head>
<title>PHP Test</title>
</head>
<body>
<?php echo ‘<p>Hello World</p>’; ?>
</body>
</html>
</pre>

↑preタグで囲んでも、コードはハイライトされていない。

そこで、テキストエディタでpreタグのみを設置します。

テキストエディタに<pre></pre>とだけ書き込みましょう。

すると、ビジュアルエディタ上に↑のように灰色の枠が出てきます。

そこに直接コードを書き込んでいきましょう。

<html>
 <head>
  <title>PHP Test</title>
 </head>
 <body>
 <?php echo '<p>Hello World</p>'; ?> 
 </body>
</html>

そうすることでコードをハイライトさせることができました。

クラシックエディタを使った状態では、Cocoonのハイライト機能を利用しようとすると、ひと手間かかってしまいます。

タイトルとURLをコピーしました