Vuetifyのblockquoteをmarkdown-itで利用する方法

markdown-itとCSSフレームワークのVuetifyを組み合わせた際に引用（blockquote）のstyleが崩れてしまう現象が発生した。

Vuetifyで引用を利用する場合、 [[<blockquote class="blockquote">]]のようにclassを付与する必要があるが、markdown-itの出力は[[<blockquote>]]のみになってしまう。

そこで、前回の記事と同様に[[renderer.rules.blockquote_open]]を書き換えることで対応を行った。

[[blockquote font-italic body-1]]を付与することで文字サイズ小さめのイタリック体で引用が表示できるようになった。

const defaultRender = function(tokens, idx, options, env, self) {
  return self.renderToken(tokens, idx, options);
};

this.md.renderer.rules.blockquote_open = function(
  tokens,
  idx,
  options,
  env,
  self
) {
  const quoteIndex = tokens[idx].attrIndex("class");
  if (quoteIndex < 0) {
    tokens[idx].attrPush(["class", "blockquote font-italic body-1"]);
  } else {
    tokens[idx].attrs[targetIndex][1] = "blockquote font-italic body-1";
  }
  return defaultRender(tokens, idx, options, env, self);
};

引用表示のサンプル

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Harum maiores modi quidem veniam, expedita quis laboriosam, ullam facere adipisci, iusto, voluptate sapiente corrupti asperiores rem nemo numquam fuga ab at.

参考

• Content styles — Vuetify.js