Open Live Writer を使ってBloggerの記事にソースコードを表示する

 

Blogerへの記事投稿には Open Live Writer（以下、OLW） を使用しています。

ソースコードに最適化して表示できるようにするOLW用のプラグインが出てこないので、他の方法をとることにしました。

bloggerのテンプレートにWeb上で提供されているSyntaxHighlighterのスクリプトを埋め込めばできそうです。記事の中でソースコードとして表示したいテキストをSyntaxHighlighterのスクリプトで囲む感じです。

なお、Bloggerのhttpsリダイレクトを有効にしている場合、SyntaxHighlighterを使用することはできないようです。

 

準備

テンプレートにSyntaxHighlighterのスクリプトを埋め込みます。

2017-04-15 (10)

Bloggerのデザイン　→　テンプレート　→　HTMLの編集

の順でテンプレートの編集モードを開きます。

テンプレートの<head>～</head>の間にJavaScriptとCSSを参照するための設定をいれます。

上記では1行目はコアスプリプトなで必須。JavaScript、vb、c#、PowerShell、PlaneText、SQL、XMLに対応させたいので、2~8行目これらを指定しています。指定していない言語を後のソースコードの埋め込みで指定するとエラーになります。2016-05-21 (4)

対応言語は下記を参照。

9行目のshCore.cssはコアCSSなので必須、10行目は好みのデザインに合わせて選びます。ここでは「RDark」を選んでいます。

デザインの選択肢は下記を参照。

SyntaxHighlighter02

同様に</body>の直前に

を入れます。

上記では画面右上に？（SyntaxHighlighterのWebサイトへのリンク）を表示させないようにしています。

SyntaxHighlighter03

（表示あり）
表示あり

（表示なし）
表示なし

 

 

記事へのソースコードの埋め込み

記事のソース編集で「ソースコードの内容」のところにソースコードを貼り付けます。「<」以降がタグと認識されてもOKな場合。

ソースコードの内容

「<」以降がタグと認識されては困る場合はこちら。こちらはOLWの編集画面に貼り付けたソースが表示されませんし、下書き状態のプレビューでも表示されません。公開しないと表示されません。

実際の表示対応言語はvbとしています。

Protected Sub ListViewJukeBox_PreRender(sender As Object, e As System.EventArgs) Handles ListViewJukeBox.PreRender

        GenerateJS()
        Dim DisplayResolution As String = Request.Cookies("UserSettings")("DisplayResolution")
        If DisplayResolution IsNot Nothing Then
            Dim intPageSize As Integer
            Dim DP1 As DataPager = ListViewJukeBox.FindControl("DataPager1")
            Dim DP2 As DataPager = ListViewJukeBox.FindControl("DataPager2")
            If DP1 IsNot Nothing And DP2 IsNot Nothing Then
                Dim pagerField As New NumericPagerField()
                Dim NextPreviousPagerField As New NextPreviousPagerField()
                NextPreviousPagerField.ButtonType = ButtonType.Button
                NextPreviousPagerField.ShowFirstPageButton = True
                NextPreviousPagerField.ShowLastPageButton = True
                NextPreviousPagerField.ButtonCssClass = "Pager"
                Select Case DisplayResolution
                    Case "Full-HD"
                        intPageSize = 36
                        ListViewJukeBox.GroupItemCount = 12
                        pagerField.ButtonCount = 80
                    Case "HD"
                        intPageSize = 16
                        ListViewJukeBox.GroupItemCount = 8
                        pagerField.ButtonCount = 50
                    Case Else
                        intPageSize = 36
                        ListViewJukeBox.GroupItemCount = 12
                        pagerField.ButtonCount = 80
                End Select
                DP1.PageSize = intPageSize
                DP1.Fields.Clear()
                DP1.Fields.Add(NextPreviousPagerField)
                DP1.Fields.Add(pagerField)
                DP2.PageSize = intPageSize
                DP2.Fields.Clear()
                DP2.Fields.Add(NextPreviousPagerField)
                DP2.Fields.Add(pagerField)
            End If
        End If

    End Sub

（Open Live Writerでの編集画面）

2016-05-21 (3)

 

参考にしたところ






































コメント











コメントを投稿






























このブログの人気の投稿









エアコン室外機のフロンガス銅管を覆うカバーを交換しました




















イメージ







入居時の設置業者さんは根元までテーピングしてくれなかったようで、リビング用エアコンの室外機の銅管保温材（耐熱パイプカバー）がむき出しになり、経年劣化で銅管が露出してしることに気が付きました。銅管保温材は粉状になり、触るとボロボロと崩れ落ちる状況です。   真夏のシーズン到来、 エアコンを外出先からコントロールできるようにした のに、故障されては困ります。  これの修理だけで業者さんを呼ぶのも、金額は高くつきそうだし、この時期どれくらい待たされるかわからないので、自分で何とかすることにしました。  リビングのエアコン室外機は南側のルーフバルコニーに設置しているので、日が昇る前の早朝に作業しました。  なお、入居は2001年なので、エアコン設置から14年経過しています。  








Read more »










ダブルクォーテーションで括られたCSVカ​ンマ区切りテキストファイルを SQL Server で Bulk Insert する方法




















イメージ







   ダブルクォーテーションで括られたCSVファイルなんて使うのかよ？と私は疑問符なんだけれど、そういうファイルを吐き出すシステムもあるらしいのでメモ。   区切り文字にカンマ[,]を使用しちゃって、データにカンマ[,]が含まれちゃってるから、ダブルクォーテーションで括るしかないんだって。タブで区切ればいいと思うんだけどね。データにタブって普通入らないでしょ。データにダブルクォーテーションが入っててもNGだし。     ポイント   最初の区切り文字を、"にする 最初の列は切り捨てる 2番目以降の区切り文字を","にする  最後の区切り文字を"\r\nにする  "はエスケープが必要なので"\になる。 区切り文字は""で囲む  インポートする CSVファイルの文字コードは ANSIにしておく。インポートする文字コードがUNICODEだとインポートできない。 ※設定誤りでインポートできていない可能性もあるので、インポートできるかもしれない。  フォーマットファイルの文字コードは ANSI でなければいけない。UNICODEだと「XML の解析: 行 2、文字 0。ドキュメントの構文が正しくありません。」エラーになる。  フォーマットファイルの最終後は改行が必要。改行なしだと「一括読み込みできません。ファイル "C:\Users\****\Desktop\MovieStars.fmt" が不完全か、読み取れませんでした。オペレーティング システム エラー コード (null)。」となる。     








Read more »










IKEAの鏡を壁に取り付ける




















イメージ







IKEAの壁掛け鏡 LINDBYN リンドビーンミラーをなるべく壁に傷を残さないように取り付けました。 IKEAの鏡は下記です。   商品番号 904.937.00 重さ4.72kg 税込3,999円   LINDBYN リンドビーン ミラー, ホワイト, 40x130 cm – IKEA       取り付けには壁美人を使用します。   壁側金具「6K」 2枚セット ホワイト / 壁美人.net ホッチキスで壁収納を実現する『壁美人』専門店 (kabebijin.net)   過去に壁美人を使ってホワイトボードを壁に掛けました。   娘の部屋＆おれの部屋に壁掛けホワイトボードを設置しMicrofost Lens ＋ OneDrive で運用してみる。 (yunogotoshi.blogspot.com)   IKEA店舗（立川店）では安全のためか、微動だにせずがっちり壁に固定された状態で取り付けられていたため、またWebでも裏面の写真が掲載されていないため、フックをかける部分の大きさ、形状がわからず、購入に躊躇しました。店員さんにお願いして外してもらい、裏面を確認すると、壁美人のフックにかかりそう。そこで購入。   鏡裏面のフック形状はは下図となります。 壁にビスを刺してそこへ引っ掛け、微調整ることを想定しているのか、階段状になっています。 いつものように壁美人をホッチキスで壁に取り付けます。   今回は二つ使います。メーカー仕様によると、静止耐荷重は一つで最大6kgなので12kgの静止耐荷重となります。鏡が4.72kgなので余裕でしょう。フックの間隔は中心点で335mmとなります。   フックとなる壁美人は鏡で見えなくなりますが、化粧カバーを取り付けました。 こんな感じです。 壁美人のフックに引っ掛けるため、上部が少し浮くので、中央部と下部にスペーサーを貼り付けました。   このスペーサーの裏面はテープになっているので取り付けが簡単です。Amazonなどでクッションテープで検索すると出てくるでしょう。   ※私が使用しているのはホームセンターで購入したもので、巻取り型のタイプではありません。   スペーサーを貼ることで、やや傾斜も出ることから、足を長く見せることも可能かもしれません・・・   取り付けた上部です。 中部から下部です。上部よりやや浮いているので、傾








続きを読む