スポンサーサイト

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

SyntaxHighlighterのデザインをいじる。


 以前導入した「SyntaxHighlighter」の表示領域が少し寂しいので、ちょっといじって見ることにした。
 実はもうすでに初期の段階から少しいじっているのだけど。
 変更した内容は、線の色。

 緑の色が気に入らなかったので、青色のコードに変更しました。
 「shCoreDefault.css」をメモ帳でも何でも適当なエディタで開いて、以下の部分を置換。

 #6ce26c → #5687d5

 別名で名前を付けて、ファイルをブログにアップロード。
 テンプレートの編集から、headの中の shCoreDefault.css の部分を新しく付けた名前に変えるだけでした。

 で、今の時点は下の画像のとおり。
 これからいじっていったらおそらく前のページも変わってしまうので画像で残しておこう。

1.jpg


 意外と簡単に出来たので、他にもあれこれしてかっこよくしちゃおうぜってコトで、情報を漁ります。
 ここら辺を参考に。
 →「SyntaxHighlighter」で知らなきゃ損する7つのカスタマイズ
 →ソースコードをSyntaxHighlighterで読み易く!

 色の見本はこの辺りで。
 →color-hex.com

 まずは、枠線を追加してみます。
 「shCoreDefault.css」の最後に以下を追加して、ファイルをアップロードします。

 .syntaxhighlighter {
margin: 0 !important;
border: solid 1px #5687d5 !important; /*枠線を追加します*/
}


 ページを更新すれば・・・  
  (重要!FC2ブログで、アップロードで更新してもすぐに反映されない問題はこちら!)
  (自分は最初何度かハマりました。上記方法+プレビュー画面更新数回ですぐ反映されます。)

2015-06-01_16h25_10.jpg
 
 おぉー。
 更に、偶数奇数で色をシマシマに。

.syntaxhighlighter .line.alt1 {
background-color: #a4c7ff !important; /*偶数行の背景色を変更*/
}
.syntaxhighlighter .line.alt2 {
background-color: #FFFFFF !important; /*奇数行の背景色を変更*/
}

 ↓
2015-06-01_16h35_38.jpg

 最後に、タイトル設定時の色も設定しておきます。


 .syntaxhighlighter table caption {
padding: 0.2em 0 0.2em 1em !important; /*タイトルの余白*/
color: #FFFFFF !important; /*タイトルの文字色*/
background-color: #5687d5 !important; /*タイトルの背景色*/
}


 そうそう。タイトルの付け方もメモっておこう。


sample text



 いい感じになりました。
 
 でも、やっぱり最後の2行が残るのがわかりません。

 あと他の方がやっているように、このページだけとか特定の部分だけのスタイルを変更するって技術が
まだ無いから、この先スタイルを変更すると、一番最初のものから全て変わっちゃうんだろうなぁ。
 それはそれでいいんだけど、今までの経緯というかこのページの話の流れもすでにおかしいね。
 
 まぁいいか。このページの画像とスタイルが変わっていたら、きっとこの後いじったんだなということで。
 またいじります。でわ。




 
スポンサーサイト

ブログにソースコードを埋め込む

 せっかくブログをメモとして使うなら、やっぱりコードもカッコ良く表示したいと思います。
 どうやってやるんだろうと調べると、「SyntaxHighlighter」というのを使うらしい。

↓↓ 以下、このページの内容を適用してソースを表示しています。
 
 参考にしたサイトはこれ
 →FC2 ブログでSyntaxHighlighterを使ってソースコードを表示する。

 まずはダウンロードします。 
 SyntaxHighlighter
 
syntaxhighlighter

 右からdownloadをクリック。(今日の時点では 3.0.83. でした。)
 続いて出てくる画面でもClick here to download.をクリック

 あっという間にダウンロードが終わるので、デスクトップにでも解凍します。

 必要なファイルは以下のとおり。
 
 ・「styles」フォルダ内の「shCore.css」
        〃      「shCoreDefault.css]
 ・「scripts」フォルダ内の使用する言語に対応したファイル

 以上のファイルをブログにアップロードするのですが、今後どんな言語を触るかわからないので「scripts」内のファイルはとりあえず全部あげておきます。

 FC2ブログでのアップロードは、この書き込み画面の右側、「ファイルのアップロード」から。
 領域にファイルを最大5個ずつドラッグしてはせっせとアップしていきます。
 (ほんとにこんなも使うのか?)

ファイルアップロード1

 アップロードできたら、ファイル一覧のファイル情報から、アップロード先を確認しておきます。

 例→ http://blog-imgs-75.fc2.com/a/b/c/xxxxx
後々、この共通部分をコピー出来るように表示ておくと楽かも。

ファイルアップロード2

 次に、同じく右側のメニューから「テンプレートの設定」から、適用したいテンプレートの「編集」をクリックします。
 HTML編集の下にあるHTMLの中のから の間に、以下の文を貼り付けます。
 (今回は の直前に入れました。)
 「アップロード先」は先ほど確認したものを当てはめます。
 







 更に、以下の文を、下の方の
上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。
直前に入れます。
 「アップロード先」を置き換えるのを忘れずに。










 
 プレビューでなんとも無かったら更新。

 使い方は、まず表示したいソースコードを、変換ページに通して変換します。
 これをしないと < や > や & や ” を、実際に使うソースコードなのか表示用なのか判別できなくなってしまうからだとのこと。

 変換はこのページ等が楽かも。(「<pre></pre>」タグで囲む のチェックを外すこと。)
ソースを「そのまま表示する為のHTMLソース」に変換

 ソースコードを変換したら、ブログの本文に貼り付けます。
 その後、貼り付けた変換済みソースを、以下の記述で挟みます。



 変換済みソースコード



 ここで、「使用する言語」の部分は、使用する言語に合わせた言語コードを入れます。
 例えば・・・

 ・ HTML なら html
 ・ Python なら py か python

 他の言語は参考サイトで確認してください。
FC2 ブログでSyntaxHighlighterを使ってソースコードを表示する。 

 早速確認してみると…うーん。
 なぜか最後に2行空白が追加されるのと、メニューや色付けが無かったりする。
 まだまだ設定をやりつくしてないんだろうな。

 たぶん続く。
 
続きを読む
         
プロフィール

SiO_the_ORANGE

Author:SiO_the_ORANGE
 
DIYとか自作とか修理って言葉に反応します。

 いろんなことを勉強しながらちょっとずつ出来ることを増やしていこうと目論むブログです。

 情報というよりメモですが、お気付きの点あればいろいろ教えてください。

コメント大歓迎です!

最新トラックバック

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