markdown-flex-message

markdown-flex-message is a converter that transforms Markdown into Flex Message for the LINE Messaging API.

Installation

``bash
npm install markdown-flex-message --save
`

Usage

Basic usage

Convert the markdown to a Flex Message.

$3

`js
import { convertToFlexMessage } from 'markdown-flex-message'
import * as line from '@line/bot-sdk'

const markdownText =

Fruits

* apple
* banana
* cherry
.trim()

convertToFlexMessage(markdownText)
.then(({ flexMessage }) => {
const client = new line.messagingApi.MessagingApiClient({
channelAccessToken: '{{YOUR_CHANNEL_ACCESS_TOKEN}}'
})
return client.pushMessage({
to: '{{YOUR_USER_ID}}',
messages: [flexMessage]
})
})
.then(() => {
console.log('sent.')
})
`

$3

#### Talk List Screen

If an alternative text is not specified, it becomes the first 100 characters of the Markdown text

!Example1 Alt

#### Talk Screen

The default size of the Flex message bubble is giga.

!Example1 Flex

Custom Alternative text

To set custom alternative text and set the bubble size to mega, use the following code.

$3

`typescript
import { convertToFlexMessage } from 'markdown-flex-message'
import * as line from '@line/bot-sdk'

const markdownText =

Fruits

* apple
* banana
* cherry
.trim()

convertToFlexMessage(markdownText, { altText: 'Fruits', size: 'mega' })
.then(({ flexMessage }) => {
const client = new line.messagingApi.MessagingApiClient({
channelAccessToken: '{{YOUR_CHANNEL_ACCESS_TOKEN}}'
})
return client.pushMessage({
to: '{{YOUR_USER_ID}}',
messages: [flexMessage]
})
})

`

$3

#### Talk List Screen

The alternative text is Fruits.

!Example2 Alt

#### Talk Screen

The size of the Flex message bubble is set to mega.

!Example2 Flex

Code Display

markdown-flex-message also supports the display of code.

$3

`typescript
import { convertToFlexMessage } from 'markdown-flex-message'
import * as line from '@line/bot-sdk'

const markdownText =
[
'`typescript ',
'const add = (a:number, b:number): number => { ',
' return a + b ',
'} ',
'` '
].join("\n")

convertToFlexMessage(markdownText, { altText: 'Typescript sample' })
.then(({ flexMessage, textType }) => {
console.log(textType) // => "code"
const client = new line.messagingApi.MessagingApiClient({
channelAccessToken: '{{YOUR_CHANNEL_ACCESS_TOKEN}}'
})
return client.pushMessage({
to: '{{YOUR_USER_ID}}',
messages: [flexMessage]
})
})
`

$3

#### Talk List Screen

!Example3 Alt

#### Talk Screen

!Example3 Flex

Flex Bubble

You can convert Markdown into a Flex Bubble, which allows you to use Markdown as part of a carousel.

$3

`typescript
import { convertToFlexBubble } from 'markdown-flex-message'
import * as line from '@line/bot-sdk'

const markdownText =

Fruits

* apple
* banana
* cherry
.trim()
convertToFlexBubble(markdownText, { size: 'micro' })
.then(({ flexBubble }) => {
const message = {
type: "flex",
altText: 'Fruits',
contents: {
type: 'carousel',
contents: [
flexBubble,
{
type: "bubble",
size: "micro",
body: {
type: "box",
layout: "vertical",
justifyContent: "center",
contents: [
{
type: "button",
action: {
type: "uri",
label: "Show more",
uri: "http://linecorp.com/"
}
}
]
}
}
]
}
}
const client = new line.messagingApi.MessagingApiClient({
channelAccessToken: '{{YOUR_CHANNEL_ACCESS_TOKEN}}'
})
return client.pushMessage({
to: '{{YOUR_USER_ID}}',
messages: [message]
})
})
`

$3

#### Talk List Screen

!Example4 Alt

#### Talk Screen

Markdown is applied as part of the carousel.

!Example4 Flex

Flex Box

You can convert Markdown into a Flex Box. This allows you to use Markdown as part of a Flex Bubble.

$3

`typescript
import { convertToFlexBox } from 'markdown-flex-message'
import * as line from '@line/bot-sdk'

const markdownText =

Fruits

* apple
* banana
* cherry
.trim()
convertToFlexBox(markdownText)
.then(({ flexBox }) => {
const message = {
type: "flex",
altText: markdownText.slice(0, 200),
contents: {
type: "bubble",
size: 'mega',
body: {
type: "box",
layout: "vertical",
contents: [
flexBox,
{
type: "button",
action: {
type: 'clipboard',
label: 'Copy',
clipboardText: markdownText.slice(0, 1000),
}
}
]
}
}
}
const client = new line.messagingApi.MessagingApiClient({
channelAccessToken: '{{YOUR_CHANNEL_ACCESS_TOKEN}}'
})
return client.pushMessage({
to: '{{YOUR_USER_ID}}',
messages: [message]
})
})
`

$3

#### Talk List Screen

!Example5 Alt

#### Talk Screen

A button is positioned below the Markdown.

!Example5 Flex

Methods

$3

Convert the markdown to a Flex Message.

* Parameters
* markdown
* The Markdown content you want to convert.
* options.altText (Optional)
* Alternative text for flex message. If not specified, it becomes the first 100 characters of the Markdown text.
* options.size (Optional)
* The size of the Flex Bubble. Acceptable values are nano, micro, deca, hecto, kilo, mega, giga. The default value is giga.

* Return Value
* flexMessage
* The object of the Flex Message.
* textType
* The type of text in the inputted markdown. Usually returns markdown. If it contains only code, it returns code, and for content without markdown elements, it returns plain.

`typescript
convertToFlexMessage(
markdown: string,
options: ConvertOptions = {}
): Promise<{flexMessage: FlexMessage, textType: TextType}>
`

$3

Convert the markdown to a Flex Message.

* Parameters
* markdown
* The Markdown content you want to convert.
* options.size (Optional)
* The size of the Flex Bubble. Acceptable values are nano, micro, deca, hecto, kilo, mega, giga. The default value is giga.

* Return Value
* flexBubble
* The object of the Flex Bubble.
* textType
* The type of text in the inputted markdown. Usually returns markdown. If it contains only code, it returns code, and for content without markdown elements, it returns plain.

`typescript
convertToFlexBubble(markdown: string, options: ConvertOptions = {}):
Promise<{flexBubble: FlexBubble, textType: TextType}>
`

$3

Convert the markdown to a Flex Message.

* Parameters
* markdown
* The Markdown content you want to convert.

* Return Value
* flexBox
* The object of the Flex Box.
* textType
* The type of text in the inputted markdown. Usually returns markdown. If it contains only code, it returns code, and for content without markdown elements, it returns plain.

`typescript
convertToFlexBox(markdown: string): Promise<{ flexBox: FlexBox, textType: TextType }>
``

License

MIT