ワードプレスの記事内でコード表示をするには?【WPプラグイン】

公開日: : 最終更新日:2014/02/16 WPプラグイン, ワードプレス ,

くつキッチュ!アイコン wordpress html tattoo by webmove, on Flickrhtml tattoo by webmove, on Flickr

もくじ

ドキ!トラブルだらけのワードプレスブログ立ち上げ大会小ネタメモφ(. .)の二回目になります。
今回は、ワードプレスの記事内でコード表示をするには?

記事内のコード表示

くつきがじめて定期的に更新したブログは、Seesaaでした。
1年ほど利用させてもらったSeesaaに特に不満はありませんでしたけど、WordPressを使い始めてしまうと戻れなくなりますね;;
例えばSeesaaではコードを表示するプレタグが使えなかったり…。

プレタグ

というわけで、ブログ記事内でコード表示するにはpreタグというタグを使います。
大抵は<PRE>コード</PRE>で囲った部分はコードであると認識してくれるはずなのですが、Seesaaではコード部分真っ白になっちゃってました。
しかし、ワードプレスではプラグインCrayon Syntax Highlighterを導入すれば簡単にコードが表示することが出来ます↓

右端のメニューにコピペ機能があったりなかなか便利♪ これだけで「ワードプレス素敵☆」って思っちゃいます。

Codeが色分けされて見やすいプラグインSyntaxHighlighter Evolved

ちなみにこんな表示になるプラグインSyntaxHighlighter Evolvedもあります。

{
display: block;
margin-top: 0px;
margin-right: 0px;
margin-bottom: 0px;
margin-left: 0px;
}

こちらも、[言語][/言語]で囲った部分をテキストとして表示してくれるプラグインです。 色分けされていて見やすいですね。

くつきの場合は小ネタのため

と言ってもくつきもあまり詳しい方ではないので、コード記述して説明をするということはめったにありません…
この間使ったのは、HelloDollyのプラグイン編集でhello-dolly/hello.phpのこちら⇒$lyrics = “を、お好きなテキスト”;に書き換えて、オモシロ作業環境を整えようという小ネタ↓でした。

function hello_dolly_get_lyric() {
 /** These are the lyrics to Hello Dolly */
$lyrics = "お好きな罵り
だが断るッ!!
嘘だっ!!!
お好きな罵倒";
// Here we split it into lines
 $lyrics = explode( "\n", $lyrics );

結果↓ WordPress謎の標準装備プラグインHelloDollyを有効化してみた結果www

くつきがコードを表示するのはこんな時くらいですねー(;´∀`)

まとめ

当初、記事内プラグインと音楽埋め込みプラグインを同記事にしていたのですが、見づらいので別けました。
音楽(SoundCloud)埋め込み&埋め込みプラグインの記事はこちら ワードプレスの記事内でSoundCloudの音楽を埋め込むには?【WPプラグイン】

でっは~(*´∀`*)ノシ

記事がお気に召しましたら投票していただけると嬉しいです♪
ブログランキング・にほんブログ村へにほんブログ村

  • このエントリーをはてなブックマークに追加
  • Share on Tumblr

関連記事

WordPress立ち上げメモ 助けて!TOC+の反映されない(><) TinyMCE Advancedってどんなプラグイン?等 アイキャッチ画像

ドキ!トラブルだらけのワードプレスブログ立ち上げ大会小ネタメモφ(. .)

1週間ほど前にこのブログを立ち上げまして… 思いがけないトラブルや、新規導入のプラグイン等のメモが

記事を読む

Q&A by opensource.com, on Flickr そんなに良くある感じじゃない質問(検索ワード)への回答 第二弾

そんなに良くある感じじゃない質問(検索ワード)への回答 第二弾

検索キーワードで(個人的にツボに入ったという意味での)ヒットしたもの、及び当サイトでは該当す

記事を読む

ネットオウルでワードプレスをインストしてもログイン画面が表示されない時の対処法 default_page画像

ネットオウルでワードプレスをインストしてもログイン画面が表示されない時の対処法

 もくじ これまで無料サーバーのめちゃくちゃお手軽なインストールに頼りきりだったくつき

記事を読む

Wpで電子書籍っぽいページめくり効果が使えるプラグインFlippingBook Galleryの使い方 アイキャッチ画像 Lolita-kingyo illust by ss

3-Wpで電子書籍っぽいページめくり効果が使えるプラグインFlippingBook Galleryの使い方 見開きページの作り方

  追記:「WordPressの更新後、『FlippingBook Ga

記事を読む

I believe I can fly - I believe I can touch the sky... by Harold Kuiper, on Flickr TOC+を使えば記事内リンクもツーステップで簡単♪ 『wp 文字まで飛ぶようにしたい』で検索されていらしたどなたかへの手紙 

TOC+を使えば同一記事内リンクもツーステップで簡単♪ 『wp 文字まで飛ぶようにしたい』で検索されていらしたどなたかへの手紙 

  秘密の抜け穴 I believe I can fly - I believe I can

記事を読む

A calm owl by Tambako The Jaguar, on Flickr 【お知らせ】姉妹サイト『イチパン!』復旧しました( ;∀;) くつキッチュアイキャッチ画像

【お知らせ】姉妹サイト『イチパン!』復旧しました( ;∀;)

A calm owl by Tambako The Jaguar, on Flickr Some

記事を読む

WpBlog(ワードプレス)のトラブルで万策尽きて「しかたない削除するか……」と思っている方、待って!奥の手! 【アプリケーションの初期化】を試す価値あり!※自己責任でお願いします。

WpBlog(ワードプレス)のトラブルで万策尽きて「しかたない削除するか……」と思っている方、待って!

くつきちよこ年末のご挨拶バージョン   登場人物:くつきちよこ ※管理人 

記事を読む

Wpマルチサイト化サブディレクトリ型はめちゃ簡単!の初心者のハマリポイントは2箇所だけ! bento box by josey4628, on Flickr

Wpマルチサイト化(サブディレクトリ型)はめちゃ簡単!初心者のハマリポイントは2箇所だけ!

bento box by josey4628, on Flickr Wpマルチサイト化(

記事を読む

ブラウザのみでWordPressが使える無料サービスCloud9を使ってみたッチュ!

ブラウザのみでWordPressが使える無料サービスCloud9を使ってみたッチュ!

クラウド最強エディタ「Cloud9」が、WordPressもブラウザのみでインスト・開発・公開が

記事を読む

scream and shout by Mindaugas Danys, on Flickr 『SyntaxHighlighter Evolved』がフリーズしまくりで絶望したーっ!!時の対処法。

「記事内コード表示用Wpプラグイン『SyntaxHighlighter Evolved』がフリーズしまくりで絶望したーっ!!」場合の対処法。

記事内コード表示用Wpプラグイン『SyntaxHighlighter Evolved』を適用

記事を読む

  • 創作クラスタ応援し隊のくつきちよこ(崛起智世子)です。 このブログは、「ネット著 作権」、「セルフプロモーション」、「ワードプレス運用」、「電子書籍サービス」、 「自己出版(セルフパブリッシング)」、「創作」等に関する情報をお届けしておりま す。 ※Wiki『創作ステージ@まちペディア』(ちょっと押してますが)作成中です♪
  • follow us in feedly
  • くつキッチュ/スクラップス! on Tumblr

  • 「表現の自由を守る党」自作応援バナー くつきちよこ

  • マウスコンピューター/G-Tune