Enabling Markdowns using the marked library

Introduction

kintone is useful for creating Meeting Minutes Apps for document sharing, and Wiki Apps for Knowledge management. Features such as tracking history of records and enabling process management helps these Apps operate well in a team.

 

These Apps require a lot of documentation to be written in the records. Although kintone provides a Rich Text Editor in an App by default, writing with markdown syntax will allow users to write clean documents easily.

 

This article introduces a customization using marked, a JavaScript library available on the kintone CDN.
marked styles strings that are written in markdown syntax.

 

 US_01.png

 

View the README of marked to understand the types of supported markdown syntaxes.

Support Markdown in a Meeting Minutes App

As an example, we will create a simple Meeting Minutes App, and customize it to support Markdown. Markdown Syntax used in the Text Area field will be displayed in a Markdown format in the Space field of the Record Details page.

Prepare the app

Create a new App with the following fields.

Field Type

Field Name

Field Code / Element ID

Date

Date

Date

Text

Title

Title

User selection

Participants

Participants

Text Area

Contents

Contents

Space

markdown-display

markdown-display

 

US_02.png

 

 

JavaScript Customization

  1. Load the marked library from the CDN

First, add the URL of the marked library in the JavaScript and CSS Customization settings of the App.
The URL can be found in the kintone CDN.

US_03.png

  1. Create and upload a JavaScript file

The marked library is fairly simple to use, and Strings can be converted to markdown as follows:

We will use the following code for the App we created:

Save the code as a JavaScript file, and upload it to the JavaScript and CSS Customization settings.

 

When you write down markdown syntax into the Text Area field and save the record, the Markdown format will be displayed in the Space field of the Record Details page. The Text Area field will be hidden on the Record Details page so that the contents of the Space field will stand out.

US_04.png

CSS Customization

The output though doesn't look that great yet. marked only changes the written Markdown Syntax into an HTML format. Therefore, only the default kintone style is applied to the output. We can make it look better by applying additional CSS.

  1. Add a class name to the markdown-display Space field.
    We will add a class name to the Space field in the JavaScript file we made, so that styles can be applied to the element. Save the JavaScript file, and replace it with the JavaScript file that was uploaded in the previous step.

  2. Upload a CSS file
    For this sample, we will use github-markdown-css. Upload the CSS to the JavaScript and CSS Customization settings. github-markdown-css is convenient because it applies a given style to just the markdown-body class instead of the entire body.

Save the App's settings, and confirm that the style is applied to the Markdown on the Record Details page.

 

US_05.png

Finally

Using markdown syntax is an easy way to document with nicely styled text. Although kintone only supports an RTE for any sort of styled text, this customization extends kintone's functionality for those in need for a cleaner interface.

Was this article helpful?
0 out of 0 found this helpful
Do you have any questions or issues related to this article?
Please share your views with us in the Community forums!