Zenn
🪧

自作OSS アップデートして、Markdown でLTスライドを作れるようにした話

に公開
React
Vue.js
Markdown
LT
Marp
tech

はじめに

自作OSSで、Richmd というMarkdown パーサーを開発しています。
https://zenn.dev/nappa/articles/a80a05f642ed1f

実は開発当初から Marp のような Markdown で LTスライドが作れる様になると良いなと思っていましたが、遂に、5年の時を経てLTなどで使えるプレゼン用スライド作成機能をリリースしました! 🎉

特徴

特徴としては、

  • 比較的簡単な記法でレイアウトやテーマを設定できる
  • 数式やコードブロックでプログラミングコードの記載ができる
  • 自由にデザインをカスタムできる
  • React, Vue で使用可能 → Next.js, NuxtJS でスライド管理可能

というのが、大きな特徴です。一番の強みは、React, Vue にてコンポーネントベースで使用できる点だと考えています。

既存のサービスで Marp というサービスがありますが、

https://marp.app/

公式では VSCode で使用するかCLIでHTMLに変換するしかないのですが、Richmd はReact, Vue での使用を前提としているので、Webサーバー上での管理がしやすいのが大きな特徴だと考えています。

そして、基本的には独自で開発している Markdown パーサーを元に作成されているため、数式やアラートメッセージ、動画添付などが可能です。

また、現在 React のみの展開ですが、PDF ダウンロードも可能です。
(Vue の方も現在対応中です 🙏)

インストール

基本的には React, Vue との併用を強く推奨しています。

$ pnpm add @richmd/react # Use React
$ pnpm add @richmd/vue   # Use Vue
$ pnpm add @richmd/js    # Use JS(TS) Only (Deprecated)

書き方

↓詳しくはこちら。
https://github.com/richmd/react/blob/main/docs/slide-mode.md

スライド作成モードを宣言する

あくまでも Markdown パーサーであるため、スライド作成機能使うには、テキスト上で:use slide:を最初に宣言する必要があります。

:use slide:

スライドを設定

次にスライドを設定します。title, content が設定できます。

:use slide:

:---:title
# テストタイトル
:---:

:<--:content
## コンテンツタイトル

- test
- test
:---:

Web では以下のように表示されます。

title

image

content

image

また、背景やテキストのカラーを簡単に変更することが出来ます。

:use slide:

:---:title.dark
# テストタイトル
:---:

:<--:content.dark
## コンテンツタイトル

- test
- test
:---:

このような表示になります。
image

高度な使用方法

CSS やカスタムにHTMLタグを簡単に設定できる記法を屈指することで、高度なマークアップが可能になります。

::div <-- <div> タグに変換される
div
::

サンプル

slide.md
:use slide:

:<--:content.dark
## 自己紹介

::div.slide2-content-container
![avatar](my_avatar.jpg)

- **名前**: nappa
- **職業**: エンジニア(2020/04〜)
- **年齢**: 31歳
- **所属**: **来週で辞めるぅ!**
- **趣味**: ギター、開発
- **X**: @bebeji_nappa
::
:---:
globals.css
.slide12-content-container {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

上記を書いた場合、以下が表示されます。

image

React で表示

基本的に以下コードを書くだけです。スライド操作の処理もパッケージに記載したので、独自で書く必要は無いです。

"use client"

import { RichmdSlide } from "@richmd/react";
import { useEffect, useState } from "react";

export default function Home() {
  const [md, setMd] = useState('')

  useEffect(() => {
    fetch('/slide.txt')
      .then((res) => res.text())
      .then((data) => setMd(data));
  }, [])

  if (!md) {
    return null;
  }

  return (
    <RichmdSlide text={md} />
  );
}

最後に

まだまだ、パース部分含め改良の余地はありますが、これからも引き続きアップデートしていきますので、ご期待ください!

是非、Richmd を使用していただけると幸いです!

https://github.com/richmd/react
https://github.com/richmd/vue

Discussion