line-markdown is a converter that transforms Markdown into Flex Message for the LINE Messaging API.
npm install line-markdown

line-markdown is a converter that transforms Markdown into Flex Message for the LINE Messaging API.
``bash`
npm install line-markdown --save
Convert the markdown to a Flex Message.
`js
import { convertToFlexMessage } from 'line-markdown'
import * as line from '@line/bot-sdk'
const markdownText =
.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
The default alternative text is
markdown, so the talk list screen will display markdown.#### Talk Screen
The default size of the Flex message bubble is
giga.Custom Alternative text
To set custom alternative text and set the bubble size to mega, use the following code.
$3
`typescript
import { convertToFlexMessage } from 'line-markdown'
import * as line from '@line/bot-sdk'const markdownText =
.trim()convertToFlexMessage(markdownText, '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.#### Talk Screen
The size of the Flex message bubble is set to
mega.Code Display
line-markdown also supports the display of code.$3
`typescript
import { convertToFlexMessage } from 'line-markdown'
import * as line from '@line/bot-sdk'const markdownText =
[
'
`typescript ',
'const add = (a:number, b:number): number => { ',
' return a + b ',
'} ',
'` '
].join("\n")convertToFlexMessage(markdownText, '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
#### Talk Screen
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 'line-markdown'
import * as line from '@line/bot-sdk'const markdownText =
.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
#### Talk Screen
Markdown is applied as part of the carousel.
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 'line-markdown'
import * as line from '@line/bot-sdk'const markdownText =
.trim()
convertToFlexBox(markdownText)
.then(({ flexBox }) => {
const message = {
type: "flex",
altText: 'Fruits',
contents: {
type: "bubble",
size: 'mega',
body: {
type: "box",
layout: "vertical",
contents: [
flexBox,
{
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
#### Talk Screen
A button is positioned below the Markdown.
Methods
$3
Convert the markdown to a Flex Message.
* Parameters
* markdown
* The Markdown content you want to convert.
* altText (Optional)
* Alternative text. The default value is
markdown.
* 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,
altText: string = 'markdown',
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 }>
``