Enable Markdowns in Fields

Contents

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 (External link) with the following field and settings. Save the form when finished.

Field Type Field Name Field Code / Element ID
Date Date Date
Text Title Title
User selection Participants Participants
Text area Contents Contents
Blank space - markdown-display

The form should look like the following:

Set the Libraries

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

  • 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 (External link) .

 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