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

kintone カスタマイズ
1

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

機能を作っています。

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

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

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

よろしくお願いします。

  1. (function() {
  2.     “use strict”;
  3.  
  4.     var showEvents = [‘app.record.detail.show’];
  5.     var previewEvents = [‘app.record.create.show’,‘app.record.edit.show’];
  6.  
  7.     //レコード詳細が開かれたとき
  8.     kintone.events.on(showEvents, function(event) {
  9.         var record = event.record;
  10.  
  11.         // markdownで書いてあるフィールドを取得
  12.         var mark = kintone.app.record.getFieldElement(‘内容’); 
  13.         //markdown記法で表示させる
  14.         mark.innerHTML = marked(record[‘内容’].value);
  15.         // CSSを適用するためにclassを加える
  16.         mark.classList.add(‘markdown-body’);
  17.  
  18.         return event;
  19.  
  20.     });
  21.  
  22.     // プレビューボタン押下時に Markdown 記法をプレビューする
  23.     kintone.events.on(previewEvents, function(event) {
  24.         // スペースフィールドにボタンを設置
  25.         var btn_Preview = document.createElement(‘button’);
  26.         btn_Preview.id = ‘btn_preview’;
  27.         btn_Preview.innerHTML = ‘プレビュー’;
  28.         kintone.app.record.getSpaceElement(‘btn_preview’).appendChild(btn_Preview);
  29.  
  30.         //ボタン押下時の処理
  31.         btn_Preview.onclick = function () {
  32.             var record = kintone.app.record.get();
  33.             var SpaceEl = kintone.app.record.getSpaceElement(‘preview’);
  34.  
  35.             SpaceEl.innerHTML = marked(record.record[‘内容’].value);
  36.             SpaceEl.classList.add(‘markdown-body’);
  37.             kintone.app.record.set(record);
  38.         }
  39.  
  40.         return event;
  41.         });
  42. })();
  1. {
  2.     “manifest_version”: 1,
  3.     “version”: 1,
  4.     “type”: “APP”,
  5.     “name”: {
  6.         “ja”: “Markdown プラグイン”,
  7.         “en”: “Markdown plugin”
  8.     },
  9.     “description”: {
  10.         “ja”: “kintone で Markdown 記法を利用可能にするプラグインです。”,
  11.         “en”: “To make Markdown available for kintone.”
  12.     },
  13.     “icon”: “image/icon.png”,
  14.     “desktop”: {
  15.         “js”: [
  16.             “https://js.cybozu.com/markedjs/v0.3.5/marked.min.js”,
  17.             “js/markdown.js”
  18.         ],
  19.         “css”: [
  20.             “css/github-markdown.css”,
  21.             “css/51-modern-default.css”
  22.         ]
  23.     }
  24. }

正しい表示の画像

 

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

2

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

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

3

ありがとうございます！

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