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

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.

参考


Related #js

Next.jsのPreview Mode時はAnalyticsを無効化する

cookieの__next_preview_dataキーで判定

next.jsにtailwindcssを導入する

VSCodeのTailwind CSS IntelliSense拡張が便利

Alexaに気温と二酸化炭素濃度を教えてもらう

「Alexa、気温」でセンサー情報を教えてくれるようになった

ESLintでimport文を自動で並べ替える

eslint-plugin-simple-import-sortを使う