プログラムソースの表示、画像の表示 - 研究室Web(4)

Middleman Ruby Haml 2018年 8月 27日

せっかくなので、Scrapbox に書いた記事を Middleman でコンバートしてみることにした。 そこで問題になるのが、プログラムソースの記載と画像であった。 それぞれ、簡易的なメソッドを書くことで簡単に描画できるようになったので、ここに示しておく。 なお、基本的に画像はスクリーンショットになるので、Scrapbox と同様 Gyazo を利用することにした。

• 共通に利用するヘルパメソッドを lib/custom_helpers.rb というファイルにまとめることにする。 まず config.rb でこのファイルをヘルパとして登録する

require 'lib/custom_helpers.rb'
helpers CustomHelpers

• CustomHelpers にソースを描画する include_source、画像を描画する include_gyazo を追加する haml をコード内に記載したくないので、haml 部分はテンプレートに記載した。
• include_source は記述するプログラムソースと言語を指定する。 プログラムソースは文字列で指定するが、複数行のソースを書く方法は後述する。 言語は省略した場合は、:bash となるようにした(コマンドの使い方の説明が多いため)。
• include_gyazo はGazo のファイル名を指定する(基本的には Gyazo の ID + '.png' でよいはず)。 alt には画像のタイトルを指定する。 そのまま img タグの alt にも指定される。

module CustomHelpers
  def include_source(source, lang = :bash)
    partial 'include_source', locals: {source: source, lang: lang}
  end

  def include_gyazo(fname, alt)
    partial 'include_gyazo', locals: {fname: fname, alt: alt}
  end

• _include_source.html.haml は以下のように記載した。hilightjs を入れているので、言語にしたがってコンテンツハイライトが実行される。

%pre
  %code{class: lang}
    = preserve { html_escape source }

• _include_gyazo は以下のように記載した。画像は card でくくり、画像の説明は footer で指示している。

.card.border-info.mb-3{style: 'width: 100%;'}
  .card-body
    %img{src: "https://i.gyazo.com/#{fname}", alt: alt, style: 'width: 100%;'}
  .card-footer
    = alt

• 1行のプログラムソースを記載したい時には、以下のように記述する。

= include_source 'be middleman b'

• 複数行のプログラムソースを記載したい場合には、Frontmatter に記載した変数を指定する(上の _include_source.html.haml を例にした)。

= include_source current_page.data.include_source, :ruby

• この時、Frontmatter に include_source という変数を指定する。 ここで YAML の | を使うことで、複数行のテキストであっても、余計なエスケープなどを気にしないでよくなる

include_source: |
  %pre
    %code{class: lang}
      = preserve { html_escape source }

• その後色々と見た目の修正をした
• ページヘッダ・フッタを固定化
• タグと年・月・日をバッチを使ったリンクとして追加

- if current_article
  - current_article.tags.each do |key|
    = link_to key, tag_path(key), class: 'badge badge-pill badge-info'
  - d = current_article.date
  = link_to "#{d.year}年", blog_year_path(d.year), class: 'badge badge-pill badge-warning'
  = link_to "#{d.month}月", blog_month_path(d.year, d.month), class: 'badge badge-pill badge-warning'
  = link_to "#{d.day}日", blog_day_path(d.year, d.month, d.day), class: 'badge badge-pill badge-warning'