介護の仕事をしながらブログを運営している"ブロガーお助け屋”

”ブロガーお助け屋”ってなに?

記事内にコードの見本をのせるプラグインを知ってますか?

 
この記事を書いている人 - WRITER -
青木なおと
プロ野球のブログを書いていくうちにSEO関連に興味を持ち猛勉強しています。今、ブログ集客に悩んでる方の少しでも参考になるブログを目指してのんびり更新しています。
詳しいプロフィールはこちら

こんにちは。

 

たくさんの方のブログをみているとよくCSSコードの見本を載せている投稿を見かけると思います。

 

「あれ?これってなんのプラグインで挿入してるの?」って思いますよね。

 

それを解決するプラグイン【SyntaxHighlighter Evolved】の使い方を紹介していこうと思います。

 

SyntaxHighlighter Evolvedってどんな機能?

 

「CSSコードの見本」って言ってもいまいち、イメージがわかないと思います。

百聞は一見に如かず!これのことだあぁぁぁぁ!

[css] SyntaxHighlighter Evolvedっていうプラグインはね
こうやって
コードの見本を
見せる
プラグインなんだよ!
[/css]

 

見た瞬間、「あぁ…これのことか」って思った方もいると思います。

 

それではワードプレスにどうやって導入するか教えていきますね!

 

 

SyntaxHighlighter Evolvedを導入するには?

 

まずはワードプレスのプラグインのダッシュボードを開き「プラグイン」から「新規追加」をクリックします。

 

次に画面の右上に出てくる「プラグインの検索…」という欄がありますのでそこに【SyntaxHighlighter Evolved】と入力します。

 

入力をしたらキーボードの「Enterキー」押します。

 

 

SyntaxHighlighter Evolvedが表示されると思いますので「新規追加」をクリックしてください。

 

そうすると「有効化」または「プラグインを有効化」と出てくると思いますので、クリックしてください。

 

SyntaxHighlighter Evolvedを設定する

 

ワードプレスのダッシュボードの「設定」にマウスを置くとSyntaxHighlighter Evolvedが追加されていると思います。

 

クリックすると上記の画像のような画面になると思います。

 

これがSyntaxHighlighter Evolved」の設定画面になります。

 

あとは自分の好きな表示の仕方にレ点を入れ変更を押してください。そうすると下の方にプレビューが表示されます。

 

また「テーマ」をクリックすると様々な表示方法があるのでお好きなのを選んでくださいね!

 

SyntaxHighlighterの使い方は?

 

使い方はとても簡単で、コードの種類に合わせてSyntaxHighlighterのショートコード

 

[言語]ここにコードを挿入[/言語]

 

と囲むだけです。そうすると↓のように表示がされます。

 

[css] 囲むだけです。
[/css]

 

対応している言語は以下の通りです。

 

対応言語 ショートコード
ActionScript3 as3・actionscript3
Bash/shell bash,・shell
C# c-sharp・csharp
C++ cpp・c
CSS CSS
Delphi delphi・pas・ pascal
Diff diff,・patch
Groovy groovy
JavaScript js・jscript・avascript
Java java
JavaFX jfx・javafx
Perl perl・pl
PHP php
Plain Text plain・text
PowerShell ps・powershell
Python py・python
Ruby rails・ror・ruby
Scala scala
SQL sql
XML xml・xhtml・xslt・html・xhtml

 

まとめ

 

先生、すごい!

このプラグインはアドセンスを教えている方やプログラミングの発信記事を書いている方は必須ですからね!ぜひ一度、使ってみてください!

 

ブログを読んでいただきありがとうございました。

この記事を書いている人 - WRITER -
青木なおと
プロ野球のブログを書いていくうちにSEO関連に興味を持ち猛勉強しています。今、ブログ集客に悩んでる方の少しでも参考になるブログを目指してのんびり更新しています。
詳しいプロフィールはこちら

- Comments -

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

CAPTCHA


Copyright© 青木なおとのブログ , 2018 All Rights Reserved.