Help us understand the problem. What is going on with this article?

jekyllのmarkdownにカスタムタグを定義する

More than 5 years have passed since last update.

jekyllのmarkdownで独自の記法を定義して、特定のhtmlを出力したい。

処理概要

Jekyll::Converters::Markdown::***Parserクラスのconvertメソッドを拡張し、
convertをかける前に、特定の記法を変換する。

pluginの作成

_plugin/extendMd.rbというファイルを作り、以下の様なコードを記述します。
※この例ではRedcarpetParserの拡張になっていますが、別のparserを使う場合はそのクラスを指定して下さい

module Jekyll
  module Converters
    class Markdown
      class RedcarpetParser
        alias :old_convert :convert
        def convert(content)

          # ここにコンバート処理を記述

          old_convert(content)
        end
      end
    end
  end
end

変換処理ケース1: smallタグを出力したい

--(ハイフン2つ)をsmallタグとして出力。
—-small text<small>small text</small>

def convert(content)

  # small word
  content.gsub! /(^|\s)(--\w+)/ do
    "#{$1}<small>#{$2}</span>"
  end

  old_convert(content)
end

変換処理ケース2:Twitterの埋め込みを出力したい

[tweet:https://twitter.com/kt_Biz/status/414717821034041344]

という形式の記法の出力をTwitterの埋め込みとして表示する場合。

def convert(content)

  # parse embed tweet
  content.gsub! /(\[tweet:https:\/\/twitter\.com\/\w+\/status\/[[:digit:]]+\])/ do
    "<blockquote class=\"twitter-tweet\" lang=\"en\"><a href=\"#{$1}\"></a></blockquote><script async src=\"//platform.twitter.com/widgets.js\" charset=\"utf-8\"></script>"
  end

  old_convert(content)
end

カスタマイズしたい場合はこちらを参考 → 埋め込みツイート | Twitter Developers


という感じで、markdownに独自の記法を追加することができます。お試しあれ。

kyohei8
おはようございます。
http://www.twopipe.com
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away