FC2ブログでコードを行番号つきで表示する方法Mac・iPhone・iPad・Android・Nexus5・文房具・LAMY・将棋・レポートについてのネタを綴っています。2013.12.11ブログ記事内にコードを表示する時のデザインがいまいちだったので、見やすくするためにコードを行番号付きで表示するようにしました。その時に利用したのが「SyntaxHighlighter」です。今回は、「SyntaxHighlighter」をFC2ブログで使用する方法を紹介します。実際に反映した画面SyntaxHighlighterを使ってFC2ブログにコードを行番号つきで表示する方法SyntaxHighlighterの使い方に関して、以下の記事を参考にしました。WebTerminal上記事ではBlogger向けだったのですが、基本的にFC2ブログでも同じように適用できました。手順の流れまずは、コードを行番号付きで表示する流れを示しておきます。生成されたスクリプトをFC2テンプレートのHTML内</head>直前にはりつけるブログ記事内で、所定の書式により、コードをはる無事反映されている!では順番に見ていきます。Way2Bloggingのページでデザインを選びます。▲Theme(テーマ)をDefaultに選択し、Generateを押しました。Brushes」は、色分けしたい言語です。今回はあまり意識していません。JavaScriptだけにチェックを入れてみました。▲そして、生成されたコードをコピーします。生成されたスクリプトをFC2テンプレートのHTML内</head>直前にはりつける▲FC2ブログ=>設定=>テンプレートの設定から、HTMLの編集をします。HTML内にある</head>の直前に、先ほどコピーしたスクリプトをはりつけ、更新をします。ブログ記事内で所定の書式によりコードをはるここまでで準備は整いました。あとは、実際に表示したいコードをブログで書くだけです。この時には、決まった書式があります。それが以下になります。「ここにコードをはる」の部分に、表示したいコードを書きます。「brush:」の後には、表示したい言語を書いてください。上の例ではjavascriptとなっています。titleは空欄でも構いません。/>タグで改行してください。(以下参照)▲FC2ブログの記事編集画面で、改行の扱いをHTMLタグのみにしてください。実際に反映した画面LaTeX文書作成\documentclass[uplatex]{jsarticle}\begin{document}\end{document}を表示したい時には、以下のようにコードをはりつけました。/>\end{document}</pre>その結果が以下になります。\documentclass[uplatex]{jsarticle}\begin{document}\end{document}見やすくなっていますね。以上、FC2ブログでコードを行番号付きで表示する方法でした。関連記事FC2ブログの記事と画像をバックアップする方法ブログの見出しテンプレート(ページ内リンクジャンプ有り)を作成したブログ用に、実名非表示のFacebookページを作成したブログ運営スポンサーリンクシェアするTwitterFacebookはてブPocketLINEコピースポンサーリンクhibikan日々の観察ブログ関連記事ブログ運営MacのMarsEdit・テキストエディットで特定のHTMLタグを削除する方法iPhoneからFC2ブログへアップロードするためには、するぷろというアプリを利用しています。するぷろを利用すると、改行はbrタグに変換されるという仕様になっています。Boxを設置した手順を書きました。Box)をFC2ブログのサイドバーに...2014.01.30ブログ運営ブログの見出しテンプレート(ページ内リンクジャンプ有り)を作成した長くなるブログ記事の時には、まず記事冒頭で記事の見出しをつけておくようにしています。その見出しには、各見出しへのリンクへジャンプ(遷移)できるようにしています。Readerも存在します。Feedlyでの購読者数はこちらの記事でも書いた通り、人数を確認する事が出来るのですが、L...2013.09.05ブログ運営ブログ用に、実名非表示のFacebookページを作成したブログの流入要素には、検索だけでなくSNSの影響も見過ごせません。今まで放っておいていましたが、ようやく重い腰をあげて、匿名でのブログ用Facebookページを作成してみましたので、その手順を残しておこうと思います。いうオプションがあります。記事にパスワードをかけて、そのパスワードを知っている人だけが記事を閲覧できるようにする機能です。知り合いだけに見せたい記事があったので、その際に初めて使用してみました。コメントをキャンセルメールアドレスが公開されることはありません。*サイト上に表示された文字を入力してください。Chromeの「要素の検証」で行っている2014.07.252018.03.18ブログのスマートフォンページに「LINEで送る」自作ボタンを設置2014.07.082018.03.15「公式Twitterアプリでこの記事をつぶやく」ソーシャルボタンの作成&設置方法2014.07.072018.10.02ブログの見出しテンプレート(ページ内リンクジャンプ有り)を作成した2014.06.262018.03.16ブログでキーボードコマンドを見やすくするためのCSS設定方法2014.06.242018.03.17iPhoneの文字入力で呼び出せるようにしておくと便利な記号たち2014.06.102018.03.19Facebookへのブログ更新通知を手動&サムネイル付きで行うためのブックマークレットを導入2014.01.302018.03.14タイトルとURLをコピーしました。