SyntaxHighlighter Evolved

WordPressのプラグイン【SyntaxHighlighter Evolved】を使ってみました。
こちらを利用すると、サイト上で公開するソースコードが綺麗に表示されます。
とても簡単に見栄えをよくでき、多様なプログラミング言語にも対応している便利なプラグインです。
 
 

このプラグインのオススメポイント

・Webサイト上でエディタのようにソースコードが見やすくなる。
・設定画面が日本語化されている。
・ソースコードのみをコピーできる。
・複数のテーマの中から、好きなデザインを選べる。

 
 

使い方

使い方はとっても簡単です。
下記のように表示したいソースコードを[言語名]…[/言語名]で囲むだけです。

[css]
#globalnavi li {
    width: 200px;
    height: 40px;
    margin: 0;
    padding: 0;
    display: inline;
}
[/css]

 
 

実際の見え方

HTML
[html]
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>Seagull.</title>
<meta name="description" content="">
<meta name="keywords" content="">
<link rel="stylesheet" href="seagull.css">
<script src="seagull.js"></script>
[/html]

PHP
[php]
<div>
<h1>WordPress</h1>
<?php
//get comment
if (!isset($_SERVER[‘PHP_AUTH_USER’]))
{
echo ‘Hello World’;
}
?>
</div>
[/php]

CSS
[css]
#globalnavi li {
width: 200px;
height: 40px;
margin: 0;
padding: 0;
display: inline;
}
[/css]

javascript
[javascript]
<script type="text/javascript">
function alt() {
alert("Hello World");
}
</script>
[/javascript]

C#
[c language=”c#”]
using System;
using System.Text;
using System.IO;

namespace WatchHolder
{
class GetFileInfo
{
public string[] ReturnFileInfo(string file_path)
{
System.IO.FileInfo f_info = new System.IO.FileInfo(file_path);
fileName = f_info.Name;
file_size = f_info.Length.ToString();
file_type = f_info.IsReadOnly.ToString();
string [] file_info = new string[4];
file_info[0] = fileName;
return file_info;
}
}
}
[/c]

SQL
[sql]
SELECT *
FROM Production.Product
ORDER BY Name ASC;
[/sql]

 
 

ソースコードが枠からはみ出した時の対処法

スマートフォン等で表示したときに、ソースコードが枠からはみ出し、レイアウトが崩れることがあります。
その際はスタイルシートに下記を追記ください。
[css]
.syntaxhighlighter table {word-break: break-all;}
[/css]