VBAの勉強を始めてみた

色々試しています。

ブログを見やすくする：ソースコードを見やすくカスタマイズ ～はてな記法、Markdown記法～

プログラミング HTML はてな記法 Markdown記法

今回は、「はてな記法」と「Markdown記法」を使ってソースコードの表示を見やすくカスタマイズしてみたいと思います。

 

はてな記法とは？

はてな記法を使うと、HTMLの知識がなくても、見出しやリストといった、ブログを書く上で便利な表現を簡単に行うことができます。（はてなダイアリーヘルプより）

例えば、「はてな記法」編集モードでは

 

<h3>はてな記法とは</h3>

 

を

 

*はてな記法とは

 

と書くことができます。

こう書くと「各HTMLごとにはてな記法があるのか･･･覚えるの大変そうだなぁ」と思ってしまいそうですが、意外とはてな記法はそんなに多くなく、必要最低限のものに凝縮されているようです。下記は、はてなダイアリーヘルプ内の、はてな記法一覧へのリンクです。

はてな記法一覧 - はてなダイアリーのヘルプ

これくらいなら、一覧を参照しながら記述できそうです。

 

で今回の目的である、ソースコードの表示を見やすくするためのはてな記法は･･･

 

>||
ここにソースコードを記載する
||<

 

シンタックス・ハイライト（プログラムコードなどの構文を色付けする）させる場合は

 

>|ファイルタイプ|
ここにソースコードを記載する
||<

 

となります。ファイルタイプは、はてなダイアリーヘルプに網羅されていますので参照下さい。
試しにVBAのコードをはてな記法で表示してみます。（VBAのファイルタイプはvbです）

Sub 乱数を生成()
    '10未満1以上の乱数を5000個生成する
    Dim i As Integer
    Randomize
    For i = 2 To 5001
        Cells(i, 2).Value = Rnd
    Next i
    Randomize
    For i = 2 To 5001
        Cells(i, 2).Value = Cells(i, 2).Value + Int((9 - 1 + 1) * Rnd + 1)
    Next i
End Sub

こんな感じで、表示されます。ちなみに背景色・文字色（ハイライトされない文字）は外部CSSで指定した色になるようです。

 

 

Markdown記法とは？

書きやすくて読みやすいプレーンテキストとして記述した文書を、HTML文書へと変換できるフォーマットとして、開発された記法だそうです。･･･要するにHTMLタグをいちいち記述するのは大変なので、簡単に書く方法を考えてみたよ！ということですね。しかし、Markdown記法で書いたものをそのままブラウザで表示することはできないので、Markdown記法→HTMLに変換するスクリプト（Markdown.pl）を実装している必要があります。
はてなブログは、Markdown記法で書いたものをHTMLへ変換するスクリプトを実装したブログということになります。

例えば、「Markdown記法」編集モードでは

 

<h3>Markdown記法とは</h3>

 

を

 

### Markdown記法とは

 

と書くことができます。はてな記法とMarkdown記法は、HTMLへの変換スクリプトが違うだけで、目的は同じものであるといえます。はてな記法に比べて、Markdown記法のほうが汎用的なので覚える価値はあると思います。

下記は、Markdown記法の一覧（サンプル）を掲載したページへのリンクです。

Markdown記法 サンプル集 - Qiita

 

で、ソースコードの表示を見やすくするためのMarkdown記法は･･･

 

```
ここにソースコードを記載する
```

 

シンタックス・ハイライトさせる場合は

 

```言語名
ここにソースコードを記載する
```

 

となります。（VBAの言語名はvbです）

表示結果は、はてな記法の時と同じなので割愛します。

 

「見たまま」編集モードをメインに使っている方は、はてな記法とMarkdown記法には無縁か･･･というとそんなことはないかもしれません。考え方を変え、はてな記法とMarkdown記法をHTML生成のためのツールとして利用するというのもアリです。
例えば、「見たまま」編集モードには標準でシンタックス・ハイライト機能が無いので、シンタックス・ハイライトされたHTMLを「はてな記法」編集モードまたは「Markdown記法」編集モードに生成してもらいましょう。

 

※Google Chromeを使った方法です。

  1. はてな記法またはMarkdown記法でシンタックス・ハイライトしたソースコードをプレビューに表示します。
  2. プレビューの該当する要素(ここではpre)の上で右クリックし、検証をクリックします。
  3. するとページのHTML構造が表示され、pre要素が選択された状態になっていると思います。（選択されていなければ矢印マークを押して、該当の要素を選択しませう）

    f:id:kouten0430:20171125145742j:plain

  4. 該当のpre要素が選択された状態で右クリックし、「Copy」-「Copy outerHTML」で、HTMLをクリップボードに取得できます。

 

取得した、シンタックス・ハイライト済みのHTMLはこんな感じ

<pre class="code lang-vb" data-lang="vb" data-unlink=""><span class="synStatement">Sub</span> 乱数を生成<span class="synStatement">()</span>
   <span class="synComment"> '10未満1以上の乱数を5000個生成する</span>
    <span class="synStatement">Dim</span> i <span class="synStatement">As</span> <span class="synType">Integer</span>
    <span class="synStatement">Randomize</span>
    <span class="synStatement">For</span> i <span class="synStatement">=</span> <span class="synConstant">2</span> <span class="synStatement">To</span> <span class="synConstant">5001</span>
        Cells<span class="synStatement">(</span>i<span class="synStatement">,</span> <span class="synConstant">2</span><span class="synStatement">).</span><span class="synPreProc">Value</span> <span class="synStatement">=</span> <span class="synIdentifier">Rnd</span>
    <span class="synStatement">Next</span> i
    <span class="synStatement">Randomize</span>
    <span class="synStatement">For</span> i <span class="synStatement">=</span> <span class="synConstant">2</span> <span class="synStatement">To</span> <span class="synConstant">5001</span>
        Cells<span class="synStatement">(</span>i<span class="synStatement">,</span> <span class="synConstant">2</span><span class="synStatement">).</span><span class="synPreProc">Value</span> <span class="synStatement">=</span> Cells<span class="synStatement">(</span>i<span class="synStatement">,</span> <span class="synConstant">2</span><span class="synStatement">).</span><span class="synPreProc">Value</span> <span class="synStatement">+</span> <span class="synIdentifier">Int</span><span class="synStatement">((</span><span class="synConstant">9</span> <span class="synStatement">-</span> <span class="synConstant">1</span> <span class="synStatement">+</span> <span class="synConstant">1</span><span class="synStatement">)</span> <span class="synStatement">*</span> <span class="synIdentifier">Rnd</span> <span class="synStatement">+</span> <span class="synConstant">1</span><span class="synStatement">)</span>
    <span class="synStatement">Next</span> i
<span class="synStatement">End</span> <span class="synStatement">Sub</span>
</pre>

これを「見たまま」 編集モードのHTML編集に貼り付けましょう。ただし、見たまま・はてな記法・Markdown記法の各モードは記事内容を保持したまま切り替えできないので、HTML生成作業は別途済ませましょう。

 

次回は、JSライブラリを利用した、ソース・コード表示のカスタマイズについて記載したいと思います。