line-markdown

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

Installation

``bash
npm install line-markdown --save
`

Usage

Basic usage

Convert the markdown to a Flex Message.

$3

`js
import { convertToFlexMessage } from 'line-markdown'
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

The default alternative text is markdown, so the talk list screen will display markdown.

!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 'line-markdown'
import * as line from '@line/bot-sdk'

const markdownText =

Fruits

* apple
* banana
* cherry
.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.

!Example2 Alt

#### Talk Screen

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

!Example2 Flex

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

!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 'line-markdown'
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 'line-markdown'
import * as line from '@line/bot-sdk'

const markdownText =

Fruits

* apple
* banana
* cherry
.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

!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.
* 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 }>
``

License

MIT