Overview

This article introduces how to enable markdowns in fields of Kintone Apps.

Sample Image

Users can type text into fields of Kintone using the markdown syntax. When the record is added and the Record Details page is displayed, the text is displayed in a markdown style.

Prepare the App

Create the Form

Create an App with the following field and settings. Save the form when finished.

The form should look like the following:

Set the Libraries

This sample uses Marked v4.0.12 and github-markdown-css . Set the following URL and file into the App's JavaScript and CSS Customization settings .

• https://js.kintone.com/markedjs/v4.0.12/marked.min.js
• gitHub-markdown.css

Sample Code

Prepare the following JavaScript code in a text editor and navigate to the Kintone App's settings. Upload the file into the Upload JavaScript for PC option of the JavaScript and CSS Customization settings .

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20

(function() {
  'use strict';
  kintone.events.on('app.record.detail.show', function(event) {
    var record = event.record;

    // Get Spacefield
    var spaceEl = kintone.app.record.getSpaceElement('markdown-display');

    // Display markdown contents in Spacefield
    spaceEl.innerHTML = marked.parse(record.Contents.value);

    // Do not display the content field because it duplicates
    kintone.app.record.setFieldShown('Contents', false);

    // Add class to apply CSS
    spaceEl.classList.add('markdown-body');

    return event;
  });
})();

After saving the settings and clicking on Update App, add a new record. Fill the Text area with some markdown syntax. After saving the record, the Text Area field should become hidden. The markdown contents of the Text Area field should then be displayed where the Blank space field is placed.

Reference

• marked | README
• marked | License