Quartzのプラグインに慣れるため、rhysd/remark-emoji: Remark markdown transformer to replace in textを組み込んでみる。

型に関するエラーが出ているが、プラグイン自体は動作している。

参考: Making your own plugins

package.jsonへremark-emojiパッケージを追加

"remark-emoji": "^4.0.1",

追加後npm installする。

プラグインファイルを作成

quartz/plugins/transformers/emoji.tsを作成する。

import { QuartzTransformerPlugin } from "../types"
import remarkEmoji from "remark-emoji"
 
export const Emoji: QuartzTransformerPlugin = () => {
  return {
    name: "Emoji",
    markdownPlugins() {
      return [remarkEmoji]
    },
  }
}

エクスポート設定

quartz/plugins/transformers/index.tsへ以下を追加する。

export { Emoji } from "./emoji"

configファイルの設定

quartz.config.tsplugins: transformers: [へ以下を追加する。

Plugin.Emoji(),

以上でMarkdown中に :dog:などと書くと🐶に展開される。

エラーメッセージ

プラグインは動作しているがVSCodeで以下のエラーになっている。対応要

'() => { name: string; markdownPlugins(): Plugin<[(RemarkEmojiOptions | null | undefined)?], Root>[]; }' を型 'QuartzTransformerPlugin' に割り当てることはできません。
  呼び出しシグネチャの戻り値の型 '{ name: string; markdownPlugins(): Plugin<[(RemarkEmojiOptions | null | undefined)?], Root>[]; }''QuartzTransformerPluginInstance' には互換性がありません。
    'markdownPlugins(...)' によって返された型は、これらの型同士で互換性がありません。
'Plugin<[(RemarkEmojiOptions | null | undefined)?], Root>[]' を型 'PluggableList' に割り当てることはできません。
'Plugin<[(RemarkEmojiOptions | null | undefined)?], Root>' を型 'Pluggable<any[]>' に割り当てることはできません。
'Plugin<[(RemarkEmojiOptions | null | undefined)?], Root>' を型 'Plugin<any[], any, any>' に割り当てることはできません。
            各シグネチャの 'this' 型に互換性がありません。
'Processor<void, any, void, void> | Processor<void, any, any, any> | Processor<any, any, void, void> | Processor<void, void, void, void>' を型 'Processor<undefined, undefined, undefined, undefined, undefined>' に割り当てることはできません。
'Processor<void, any, void, void>' には 型 'Processor<undefined, undefined, undefined, undefined, undefined>' からの次のプロパティがありません: compiler, freezeIndex, frozen, namespace、3 など。