😽

コラボフローでもマークダウン使えるようにするカスタマイズ

なな

2023/12/15に公開

この記事はコラボフロー Advent Calendar 2023 の 15日目の記事です
コラボフローを知らない方はこちらを参考にしてみてください。

マークダウン

Zennで投稿したことあるフレンズなら「マークダウン」は身近な存在だよね🔅
マークダウンとは、テキストを装飾するための軽量マークアップ言語の一つです。
（ChatGPTちゃんより）

## 見出しです
### 小見出しです
こんにちは！今日も寒いね

- そうかなぁ
- そうなんですよ、寒いんですよ

やっぱり冬は**コタツでミカン**だよね

↑こんなのをマークダウンといいます。

コラボフローでマークダウン使いたい

たとえば長い文章を送信するとき。

な、長いし読みづらい！

画像はクリスマスについてを1000文字で語っている申請書です🧑‍🎄
（ChatGPTちゃんより）

申請書で1000文字入力することはあまりないかもしれませんが、
要点をまとめて入力することは、わたしもたまにあります。

例えば稟議書だと、

「なぜそれが欲しいのか」
「それを使うとどのような効果があるのか」

などなど、稟議を通すために一生懸命記入してたら
気付けば長文…なんてケースもあります。

書くほうも見直しが大変ですし、読むほうも大変ですよね。

その負担を、マークダウンで軽減しちゃろ！
というのが今回のテーマです🥰

カスタマイズ

今回は「marked」というライブラリを利用します！

markdown.js

(function () {
    'use strict';

    collaboflow.events.on(['request.confirm.show', 'request.detail.show'], (event) => {
        // 「fid」を除くパーツIDを記入してね
        const partsList = ['TextArea'];
        const parts = event.parts;
        for(let i = 0; i < partsList.length; i++) {
        const partsName = 'fid'+partsList[i];
        const markdownParts = parts[partsName].value;
        document.getElementById('span_' + partsName).innerHTML = marked.parse(markdownParts);
        }
    });
})();

markdown.css

h1 {
    background: #dfefff;
    color: #454545;
    font-size: 1.5em;
}

h2 {
    color:#278bb8;
}

h3 {
    color: #010079;
    text-shadow: 0 0 5px white;
    background: -webkit-repeating-linear-gradient(-45deg, #cce7ff, #cce7ff 3px, #e9f4ff 3px, #e9f4ff 7px);
    background: repeating-linear-gradient(-45deg, #cce7ff, #cce7ff 3px, #e9f4ff 3px, #e9f4ff 7px);
}

body * p{
    padding: 0%;
}