# 複数行フィールドでmarkdown記法を使えるようにするプラグインを作成したい

**URL:** https://community.cybozu.dev/t/topic/6438
**Category:** kintone 開発相談
**Created:** [2020 年 6 月 10 日午前 8:02 UTC](https://community.cybozu.dev/t/topic/6438 "2020-06-10T08:02:39Z")
**Posts on this page:** 3
**Page:** 1

<div class="post-metadata">

### Author: ![Legacy\_Account2257](https://avatars.discourse-cdn.com/v4/letter/l/9de0a6/32.png) [@Legacy\_Account2257](https://community.cybozu.dev/u/Legacy_Account2257)
#### Post date: [2020 年 6 月 10 日午前 8:02 UTC](https://community.cybozu.dev/t/topic/6438/1 "2020-06-10T08:02:39Z")

</div>

複数行フィールドでmarkdown記法で入力し、ボタンをクリックするとプレビューが見れるという

機能を作っています。

プレビューは想定通りに表示されるのですがレコード詳細で見ると表示が崩れてしまいます。

恐らくargo.cssが悪さをしていると思うのですがどう修正すればいいのかわかりません。

はじめて投稿するのでここで合っているかわかりませんが解決方法を教えていただけたらと思います。

よろしくお願いします。

* * *

1. (function()&nbsp;{
2. &nbsp;&nbsp;&nbsp;&nbsp;“use&nbsp;strict”;
3. &nbsp;
4. &nbsp;&nbsp;&nbsp;&nbsp;var&nbsp;showEvents&nbsp;=&nbsp;[‘app.record.detail.show’];
5. &nbsp;&nbsp;&nbsp;&nbsp;var&nbsp;previewEvents&nbsp;=&nbsp;[‘app.record.create.show’,‘app.record.edit.show’];
6. &nbsp;
7. &nbsp;&nbsp;&nbsp;&nbsp;//レコード詳細が開かれたとき
8. &nbsp;&nbsp;&nbsp;&nbsp;kintone.events.on(showEvents,&nbsp;function(event)&nbsp;{
9. &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;var&nbsp;record&nbsp;=&nbsp;event.record;
10. &nbsp;
11. &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;//&nbsp;markdownで書いてあるフィールドを取得
12. &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;var&nbsp;mark&nbsp;=&nbsp;kintone.app.record.getFieldElement(‘内容’);&nbsp;
13. &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;//markdown記法で表示させる
14. &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;mark.innerHTML&nbsp;=&nbsp;marked(record[‘内容’].value);
15. &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;//&nbsp;CSSを適用するためにclassを加える
16. &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;mark.classList.add(‘markdown-body’);
17. &nbsp;
18. &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;return&nbsp;event;
19. &nbsp;
20. &nbsp;&nbsp;&nbsp;&nbsp;});
21. &nbsp;
22. &nbsp;&nbsp;&nbsp;&nbsp;//&nbsp;プレビューボタン押下時に&nbsp;Markdown&nbsp;記法をプレビューする
23. &nbsp;&nbsp;&nbsp;&nbsp;kintone.events.on(previewEvents,&nbsp;function(event)&nbsp;{
24. &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;//&nbsp;スペースフィールドにボタンを設置
25. &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;var&nbsp;btn\_Preview&nbsp;=&nbsp;document.createElement(‘button’);
26. &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;btn\_Preview.id&nbsp;=&nbsp;‘btn\_preview’;
27. &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;btn\_Preview.innerHTML&nbsp;=&nbsp;‘プレビュー’;
28. &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;kintone.app.record.getSpaceElement(‘btn\_preview’).appendChild(btn\_Preview);
29. &nbsp;
30. &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;//ボタン押下時の処理
31. &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;btn\_Preview.onclick&nbsp;=&nbsp;function&nbsp;()&nbsp;{
32. &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;var&nbsp;record&nbsp;=&nbsp;kintone.app.record.get();
33. &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;var&nbsp;SpaceEl&nbsp;=&nbsp;kintone.app.record.getSpaceElement(‘preview’);
34. &nbsp;
35. &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;SpaceEl.innerHTML&nbsp;=&nbsp;marked(record.record[‘内容’].value);
36. &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;SpaceEl.classList.add(‘markdown-body’);
37. &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;kintone.app.record.set(record);
38. &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
39. &nbsp;
40. &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;return&nbsp;event;
41. &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;});
42. })();

* * *

1. {
2. &nbsp;&nbsp;&nbsp;&nbsp;“manifest\_version”:&nbsp;1,
3. &nbsp;&nbsp;&nbsp;&nbsp;“version”:&nbsp;1,
4. &nbsp;&nbsp;&nbsp;&nbsp;“type”:&nbsp;“APP”,
5. &nbsp;&nbsp;&nbsp;&nbsp;“name”:&nbsp;{
6. &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;“ja”:&nbsp;“Markdown&nbsp;プラグイン”,
7. &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;“en”:&nbsp;“Markdown&nbsp;plugin”
8. &nbsp;&nbsp;&nbsp;&nbsp;},
9. &nbsp;&nbsp;&nbsp;&nbsp;“description”:&nbsp;{
10. &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;“ja”:&nbsp;“kintone&nbsp;で&nbsp;Markdown&nbsp;記法を利用可能にするプラグインです。”,
11. &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;“en”:&nbsp;“To&nbsp;make&nbsp;Markdown&nbsp;available&nbsp;for&nbsp;kintone.”
12. &nbsp;&nbsp;&nbsp;&nbsp;},
13. &nbsp;&nbsp;&nbsp;&nbsp;“icon”:&nbsp;“image/icon.png”,
14. &nbsp;&nbsp;&nbsp;&nbsp;“desktop”:&nbsp;{
15. &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;“js”:&nbsp;[
16. &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;“[https://js.cybozu.com/markedjs/v0.3.5/marked.min.js](https://js.cybozu.com/markedjs/v0.3.5/marked.min.js)”,
17. &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;“js/markdown.js”
18. &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;],
19. &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;“css”:&nbsp;[
20. &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;“css/github-markdown.css”,
21. &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;“css/51-modern-default.css”
22. &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;]
23. &nbsp;&nbsp;&nbsp;&nbsp;}
24. }

正しい表示の画像

&nbsp;

正しくない表示の画像（見出しに下線がない。marginが広すぎる。リスト1の左に・がない）

---

<div class="post-metadata">

### Author: ![Legacy\_Account1199](https://avatars.discourse-cdn.com/v4/letter/l/ac8455/32.png) [@Legacy\_Account1199](https://community.cybozu.dev/u/Legacy_Account1199)
#### Post date: [2020 年 6 月 10 日午後 10:16 UTC](https://community.cybozu.dev/t/topic/6438/2 "2020-06-10T22:16:34Z")

</div>

おそらく複数行のフィールド（内容フィールド）にあたっているCSSと競合してるんだと思います。

プレビューと同様に、スペースフィールドに表示するのが一番ラクかと思います。  
その際、複数行のフィールド（内容フィールド）は非表示にすればいいかと思います。

---

<div class="post-metadata">

### Author: ![Legacy\_Account2257](https://avatars.discourse-cdn.com/v4/letter/l/9de0a6/32.png) [@Legacy\_Account2257](https://community.cybozu.dev/u/Legacy_Account2257)
#### Post date: [2020 年 6 月 11 日午前 1:55 UTC](https://community.cybozu.dev/t/topic/6438/3 "2020-06-11T01:55:45Z")

</div>

ありがとうございます！

スペースフィールドで表示することにします！