IT 管理部の使用しているサービスでは Markdown 記法を使用するものが多くあります。（Discord、GitHub、本ドキュメントなど） しかし、Markdown 記法に慣れない生徒が多いことや Markdown をローカル PC に用意する必要があることから、今回独自のマークダウンエディタを作成しました。

Keyaki Fes Markdown Editor

概要

Markdown 記法にはさまざまな「方言」がありますが、本エディタでは技術ブログサイトである zenn による記法を採用しています。これは、 zenn の開発したパーサーを内部的に使用しているためです。詳細な記法は以下をご覧ください。ただし、zenn 独自の記法として、「コンテンツの埋め込み」が紹介されていますが、現時点では対応していませんので注意してください。

zenn の記法を解説した記事

画面では入力と同時に生成されたものをプレビューすることができるようになっています。なお、モバイルビューではボタンで切り替える方式になっています。

入力された情報はブラウザの LocalStorage に自動で保存されるため再読み込みを行っても消えることがありません。作成したものは「Download」ボタンからローカルに保存できますし、「Upload」ボタンから読み込むこともできます。

技術スタック

フレームワークに Next.js、UI フレームワークとして TailwindCSS を使用しています。 デプロイ先は GitHub Pages であり、GitHub Actions を使用して自動デプロイを実現しています。

Markdown のパースには zenn-markdown-html 、レイアウト調整に zenn-content-css を使用しています。

ソースコードは GitHub にて公開しています。バグ報告や新規機能提案は issue か Discord サーバの Discussionチャンネルにお願いします。

keyaki-fes/markdown-editor

参考資料​

• Next.js 製 個人ブログに zenn-markdown-html と zenn-content-css を導入する
• zenn-dev/zenn-editor

はじめに​

こんにちは、IT 管理部副部長の eno1220 です。このたび、Docusaurus という Meta 社の OSS を使用して、IT 管理部のドキュメントを作成することとしました。 React ベースで開発されており、node と npm や yarn などのパッケージマネージャのみで使用できるため、採用することにしました。

ローカルでの編集方法​

はじめに、このドキュメントを管理しているリポジトリから clone します。なお、アクセス権が必要ですので、お持ちでない場合は、admin まで連絡をしてください。

git clone git@github.com:keyaki-fes/documents.git
cd documents

clone してリポジトリに移動したら、パッケージをインストールします。

npm install

yarn install

インストールしたら以下のコマンドを実行すると、 localhost://3000 でプレビューすることができるようになります。

npm run start

yarn run start

このドキュメントの活用方針に関して​

現在、以下のような活用ができるといいなと感じています。

• 各プロジェクトのドキュメント
• プロジェクト外で作成した書類・ポスター等の一覧
• メンバー育成に使用した教材
• 各言語のノウハウ共有
• 文化祭運営のノウハウ共有

なお、さらなる詳細は、以下の公式ドキュメントからご覧ください。なお、随時使用方法等を追記していく予定です。

公式ドキュメント