記事一覧

スポンサーサイト

上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。

【FC2ブログ】記事内にプログラムコードを綺麗に表示する方法



今後このブログでも

記事内にプログラムソースコードを

記載することもあろうかと思いましたので、

今回は、

『FC2ブログの記事内にプログラムコードを綺麗に表示する方法』

をご紹介したいと思います。

下記、ブロガーの方々の過去のご苦労を

参考にしながら行いましたが、結構時間がかかり苦戦しましたので、

以下にまとめました。


よろしければ以下↓クリックお願いいたします。
にほんブログ村 海外生活ブログ 外こもりへ
にほんブログ村




 環境 

以下の環境の方はスムーズにできる(はず)です!
  1. FC2ブログ

  2. HTMLテンプレート「basic_white」

  3. SyntaxHighlighter Ver3.0.83(2015年11月現在)




 参考リンク 
  1. ソースコードを美しく見せるJS「SyntaxHighlighter」をFC2ブログに入れてみた | 日刊ウェブログ式

  2. FC2ブログ記事にプログラムコード表示 | 日々の雑事

  3. FC2ブログにSyntaxHighlighterを導入する方法 | Ctrl + Z

  4. Bloggerでsyntaxhighlighter表示してみた | 難でもアリ




ツールのダウンロード


まず最初に、今回の目的を実現させるためのツール「SyntaxHighlighter」をダウンロードします。

Download



上記Downloadをクリックすると、次のような画面が表示されますので、右側のDownloadを選びます。
SyntaxHighlighter


次に、書き赤枠で囲んだClick here to downloadから最新のバージョンをダウンロードしてください。
SyntaxHighlighter



必要なファイルのみ抽出


上記でダウンロードしたファイルを解凍すると
以下の構成になっているので、
-「Scripts」フォルダから「shCore」「shBrushXml」「shBrushCss」「shBrushJScript」「shBrushPhp」
-「Styles」フォルダから「shCoreDefault.css」
を抜粋します。


 (補足)shCoreDefault.cssの修正 

shCoreDefault.cssについては、
そのままだと問題点があるのと、微調整もしたいため、
以下の通り修正を行います。
  1. モバイル端末等での表示崩れを補正する

  2. ブラウザによって(safariなど)で行番号が消えてしまうのを改善します

    .syntaxhighlighter {
    /*safariで行番号が消えるのを修正*/
    -webkit-text-size-adjust: 100%;
    }

  3. 縦スクロール非表示

  4. 縦スクロールが邪魔と思う方はこちらを行ってください。

    .syntaxhighlighter {
     /* 縦スクロール非表示 */
    overflow-y: hidden !important;
    }

  5. 表示枠線調整

  6. 表示枠線の見た目を綺麗にします。

    .syntaxhighlighter table {
    /* 表示枠の線種 線色と線の太さ調整 */
    border:solid 1px #EEE !important;
    }

  7. Internet Explorer用調整


  8. /* 以下のように変更 */
    .syntaxhighlighter.ie {
    /*IEフォントサイズ*/
    font-size: 1em !important;
    /*IE横スクロール対策*/
    padding: 0 0 1.4em !important;
    }

  9. コードはみ出し対策

  10. 横に長いコードが枠の外へ突き抜けるのを防止

    .syntaxhighlighter .line.alt1 {
    word-break: break-all !important;
    }
    .syntaxhighlighter .line.alt2 {
    word-break: break-all !important;
    }

  11. 奇数行の背景色変更

  12. 奇数行と偶数行とで色を分けて見やすくします。

    .syntaxhighlighter .line.alt2 {
    background-color: #F8F8F8 !important;
    }
    /*偶数行の背景色は以下*/
    .syntaxhighlighter .line.alt1 {
    background-color: white !important;
    }

  13. タイトル枠の表示調整

  14. タイトル部分の枠を見やすくします

    .syntaxhighlighter table caption {
    color: white !important;
    background-color: #848484 !important;
    line-height: 0.50em !important;
    font-size: 12px !important;
    margin-left:2em;
    }


ファイルのアップロード


最後にFC2サーバーへのアップロードです。
最初は、こういったプログラム系ファイルをアップロードするのは、
どのようにすればよいか迷いましたが、簡単です。
写真をアップするように、左のホームメニュー→ファイルをアップロードから
行ってください。



設定方法


まずは、.cssと.jsを読み込ませるために、
テンプレート設定→HTMLテンプレート内の
<head>~</head>の中に以下のコードを追加します。
私は</head>の直前に入れてみました。
※「アップロードディレクトリ」部分は、先ほどSyntaxHighlighterファイルたちを
アップロードしたファイルのパスに書き換えてください。








次に、同じくHTMLテンプレートのbodyタグ内
(私は</body>の直前に書きました)に
以下のコードを記述してください。
※位置としては「本文」が表示された後の場所に入れなくてはいけないそう。
※上述同様、「アップロードディレクトリ」部分は、
先ほどSyntaxHighlighterファイルたちをアップロードした
ファイルのパスに書き換えてください。



以上で、設定・準備が完了です!


使用方法


ここまで大変お疲れ様でした。
あとは、ブログの記事内でSyntaxHighlighterの機能を使うのみになります!

ただ!
私はこの最後の最後にハマりました。。。

書き方としては、以下の通り紹介されているブログが多く、
ハマってしまいました。。。

textarea内に表示したいソースコードを記載。

<textarea name=”code” class=”php” cols=”60″ rows=”10″>

コード

</textarea>


だが、私はこれ↓で試してようやくうまくいきました。
参考ブログの著者の皆様ありがとうございました。
<pre class="brush:html;" title="htmlサンプル">

コード

</pre>


表示されたいコードのタイプに応じて、
下記の通り、クラス名を適宜変更してください。
C++ (cpp, c, c++ )
C# (c#, c-sharp, csharp)
CSS (css)
Delphi (delphi, pascal)
Java (java)
Java Script (js, jscript, javascript)
PHP (php)
Python (py, python)
Ruby (rb, ruby, rails, ror)
Sql (sql)
VB (vb, vb.net)
XML/HTML (xml, html, xhtml, xslt)

以上です。
関連記事

コメント

コメントの投稿

非公開コメント

上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。