mardock

ためしにハイブリッド入力で全体を Markdown の記述にしてみる。以下、本文のフォーマットを Markdown(テキストエリア) にしていたときのものをコピペ。わりといける感じかな。

markdown で記述できるようにしたので書き込んでみる。

見出しのテスト

どうなるか。

この状態でも html 変換後の内容で draftlint ロジックが稼働するはず。

しないかな？しました。

目次のテスト

目次も HTML 変換後のものが動作するはず。

見出し 1

テスト。

見出し 2

テスト。

テーブル

簡単なテーブルを記述してみる。

普通にテキストフィールドで markdown 記述してもそうだけど、コードブロック内でテーブルを編集するのはちょっと面倒。

画像

画像を gfm の書式で貼り付け。

HTML の書き換え処理も入っているのでそれなりで表示される。

埋め込み

とりあえず CodePen でテストしていたスライドを埋め込み。全画面は動作しないが、設定がおかしい？

コード

import unified, { Processor, FrozenProcessor } from 'unified';
import rehypeParse from 'rehype-parse';
import rehypeMinifyWhitespace from 'rehype-minify-whitespace';
import rehypeStringify from 'rehype-stringify';
import rehypeSanitize from 'rehype-sanitize';
import merge from 'deepmerge';
import gh from 'hast-util-sanitize/lib/github.json';
import { Schema } from 'hast-util-sanitize';
import cheerio from 'cheerio';
import { TocItems, HtmlToc } from '../types/pageTypes';
import { processorMarkdownToHtml } from './markdown';


export function processorHtml() {
  return unified().use(rehypeParse, { fragment: true });
}


const schema = merge(gh, {
  tagNames: ['picture', 'source', 'iframe'],
  attributes: {
    source: ['srcSet', 'sizes'],
    img: ['alt', 'srcSet', 'sizes', 'className'],
    code: ['className'],
    span: ['className'],
    iframe: [
      'height',
      'style',
      'scrolling',
      'title',
      'src',
      'frameborder',
      'loading',
      'allowtransparency',
      'allowfullscreen'
    ]
  }
});


function normalizeProcessor(processor: Processor): FrozenProcessor {
  return processor
    .use(rehypeMinifyWhitespace)
    .use(rehypeSanitize, (schema as unknown) as Schema)
    .use(rehypeStringify)
    .freeze();
}


export async function normalizedHtml(
  processor: Processor,
  html: string
): Promise<string> {
  return await new Promise((resolve, reject) => {
    normalizeProcessor(processor).process(html, (err, file) => {
      if (err) {
        console.error(err);
        reject(err);
      }
      resolve(String(file));
    });
  });
}

その他

赤色になるかな。

サニタイズで span の style 属性を許可する必要がありました。

引用はもスタイルが適用されるはず。 どんな感じかなと。

おわり。