ワードプレスで表示するソースコードに改行スペースを入れる方法

Wordpress

先日、当サイトのソースコードを見やすく表示するために「Highlighting Code Block」を導入致しました

ワードプレスのプラグインです

「Highlighting Code Block」の詳細についてはこちらをご覧ください

その結果、とっても見やすくコードが表示されるようになり満足しています

ワードプレス上のコードが改行されない問題

ところで、ワードプレスでソースコードを表示する時って、なぜか改行が有効になりません

それは「Highlighting Code Block」だけの問題ではなく、シンタックスハイライターを使っても同様でした

元々のコード

例えばこんなソースコードがあったとします

/* 成功の秘訣コード */
while( result != “success" ){

  result = create();

}

ワードプレス上の表示

これをそのまま「Highlighting Code Block」で表示するとこうなります

/* 成功の秘訣コード */
while( result != "success" ){
    result = create();
}

はい、改行が消えてスペースが詰まってますよね!

編集時点でのコード

編集時にはちゃんと改行されてるのに、実際に表示されると改行が無くなってしまうんです

ちなみに、シンタックスハイライターでも同様です

/* 成功の秘訣コード */
while( result != "success" ){
    result = create();
}

はい、改行が無くなっています

なぜか改行が有効にならず、行が詰められてしまいます

これだけのソースコードだとあまり気になりませんが、数十行に及ぶコードになると見づらいことこの上ないのです

解決方法

改行したい行に空白を挿入する

以上

非常にバカバカしいのですが、単純な方法です

空白スペースを挿入するとこうなります

/* 成功の秘訣コード ↓空白挿入済み! */
while( result != "success" ){
 
    result = create();
 
}

はい、ちゃんと改行されてますね

改行されてるところにカーソルを合わせて確認してみてください

空白スペースが入ってますでしょ?

設定では変更できない?

ワードプレスの設定とか見ても、改行に関する項目って見当たらないんですよね

しかしソースコードを表示する上で改行は結構重要なファクターです

だって、改行が無かったらとっても見づらいコードになりますから!

エンジニアの年収を上げる方法

フリーランスエンジニアで年収を大幅アップしませんか?
実際に僕は会社員からフリーランスエンジニアになって年収が87万円アップしました

今なら相談(ヒアリング)するだけで3,000円分のamazonギフト券がもらえます!
初めての案件契約で最大10万円分の準備金がもらえます
非公開の高単価案件(100万円超え)が多数あります

詳しくはこちら