DEV Community: Memo Chou

Convert JSON to Markdown in Seconds! 🚀

Memo Chou — Thu, 20 Feb 2025 18:21:00 +0000

Have you ever needed to quickly transform JSON data into a human-readable format? Whether you're a developer looking for an efficient way to preview API responses or a project manager wanting to present structured data without dealing with raw JSON, JSON2Markdown Converter has got you covered! 🎯

What is JSON2Markdown Converter? 📝

JSON2Markdown Converter is a powerful tool that converts JSON data into Markdown, making it easy to read and render as formatted content. It bridges the gap between raw JSON and well-structured documentation, helping both developers and non-developers interact with data more efficiently.

🔗 Try it live: JSON2Markdown Converter

How It Works ⚙️

This tool utilizes two key packages to perform seamless conversion:

json2markdown: Parses JSON and transforms it into Markdown format.
markdown2html: Converts Markdown into sanitized HTML for safe rendering.

Conversion Rules 📌

JSON objects → Headings & Paragraphs
JSON arrays → Lists
JSON Arrays of objects → Tables
Markdown content → Retained
HTML content → Sanitized in the final stage

This ensures that your JSON data is not only converted but also structured in a way that makes sense for readers.

Real-World Examples 🌍

JSON Objects

Objects are converted into headings and paragraphs.

{
  "json_object": {
    "heading_2": {
      "heading_3": {
        "heading_4": {
          "heading_5": {
            "heading_6": "Hello, World!"
          }
        }
      }
    }
  }
}

Markdown Output:

# JSON Object

## Heading 2

### Heading 3

#### Heading 4

##### Heading 5

###### Heading 6

Hello, World!

2️⃣ JSON Arrays

Arrays are converted into lists.

[
  "🚀 Rocket",
  "🌕 Moon",
  "🌍 Earth"
]

Markdown Output:

- 🚀 Rocket
- 🌕 Moon
- 🌍 Earth

3️⃣ JSON Array of Objects

Arrays of objects are converted into tables.

[
  {
    "symbol": "🌑",
    "phase": "New Moon"
  },
  {
    "symbol": "🌕",
    "phase": "Full Moon"
  }
]

Markdown Output:

| Symbol | Phase |
| --- | --- |
| 🌑 | New Moon |
| 🌕 | Full Moon |

4️⃣ Markdown Content

Markdown content is preserved.

{
  "markdown_image": "![Logo](https://memochou1993.github.io/json2markdown-converter/logo.svg)"
}

Markdown Output:

# Markdown Image

![Logo](https://memochou1993.github.io/json2markdown-converter/logo.svg)

5️⃣ HTML content

HTML content is sanitized in the final stage.

{
  "html_link": "<a onmouseover=\"alert('XSS Attack will be ineffective!')\" target=\"_blank\" href=\"https://github.com/memochou1993/json2markdown-converter\">Visit GitHub</a>"
}

Markdown Output:

# HTML Link

<a onmouseover="alert('XSS Attack will be ineffective!')" target="_blank" href="https://github.com/memochou1993/json2markdown-converter">Visit GitHub</a>

HTML Output:

<h1>HTML Link</h1><p><a href="https://github.com/memochou1993/json2markdown-converter" target="_blank">Visit GitHub</a></p>

Why Use JSON2Markdown Converter? 🤔

✅ Quickly Browse Data – Instantly convert JSON into a more readable format.
✅ User-Friendly – Designed for both developers and non-developers.
✅ Safe & Secure – Sanitized HTML prevents XSS attacks.

Want to Use the Packages? 🛠️

If you prefer to integrate JSON-to-Markdown into your own project, you can install the packages and use them as follows:

import { Converter as JsonToMarkdownConverter } from '@memochou1993/json2markdown';
import { Converter as MarkdownToHtmlConverter } from '@memochou1993/markdown2html';

const markdown = JsonToMarkdownConverter.toMarkdown({
  status: '😤',
});

const html = MarkdownToHtmlConverter.toHTML(markdown);

console.log(html);
// Output:
// <h1>status</h1>
// <p>😤</p>

🔗 Explore more on GitHub: JSON2Markdown Converter

Feel free to give JSON2Markdown Converter a try for your JSON-to-Markdown needs! 🎉 You can also use the packages in your own projects to make the process even easier. 😊

GPT AI Assistant: Chat with AI using LINE App

Memo Chou — Sun, 18 Dec 2022 17:15:42 +0000

About

GPT AI Assistant is a lightweight and extensible application that is implemented using the OpenAI API and LINE Messaging API.

Through the installation process, you can start to chat with your own AI assistant using the LINE mobile app.

Demo

Repository

https://github.com/memochou1993/gpt-ai-assistant

Installation

Log in to the OpenAI website.
- Generate an OpenAI API key.
Log in to the LINE website.
- Add a provider (e.g. "My Provider").
- Create a channel (e.g. "My AI Assistant") of type Messaging API.
- Click the "Messaging API" tab and generate a channel access token.
Log in to the GitHub website.
- Go to the gpt-ai-assistant project.
- Click the "Star" button to support this project and the developer.
- Click the "Fork" button to copy the source code to your own repository.
Log in to the Vercel website.
- Click the "Create a New Project" button to create a new project.
- Click the "Import" button to import the gpt-ai-assistant project.
- Click the "Environment Variables" tab and add the following environment variables with their corresponding values:
- OPENAI_API_KEY with the OpenAI API key.
- LINE_CHANNEL_ACCESS_TOKEN with the LINE channel access token.
- LINE_CHANNEL_SECRET with the LINE channel secret.
- APP_LANG with en.
- Click the "Deploy" button and wait for the deployment to complete.
- Go to the dashboard, copy the application URL, e.g. "https://gpt-ai-assistant.vercel.app/".
Go back to the LINE website.
- Go to the page of "My AI Assistant", click the "Messaging API" tab, set the "Webhook URL" to application URL with "/webhook" path, e.g. "https://gpt-ai-assistant.vercel.app/webhook" and click the "Update" button.
- Click the "Verify" button to verify the webhook call is successful.
- Enable the "Use webhook" feature.
- Disable the "Auto-reply messages" feature.
- Disable the "Greeting messages" feature.
- Scan the QR code using the LINE mobile app to add as a friend.
Start chatting with your own AI assistant!

Upgrade

On your own gpt-ai-assistant project page, you can click on the "Sync fork" menu and then click on either the "Update branch" or "Discard commit" button to synchronize the latest code to your repository.

When the Vercel bot detects a change in the code, it will automatically redeploy.

Commands

Send commands using the LINE mobile app to perform specific functions.

General Commands

Name	Alias	Description
`Talk`	`/talk`	Talk with AI Assistant.
`Draw`	`/draw`	Ask AI Assistant to draw a picture.
`Continue`	`/continue`	Ask AI Assistant to continue the conversation.
`Activate`	`/activate`	Activate auto-reply. The `VERCEL_ACCESS_TOKEN` environment variable is required.
`Deactivate`	`/deactivate`	Deactivate auto-reply. The `VERCEL_ACCESS_TOKEN` environment variable is required.

System Commands

Name	Alias	Description
`Command`	`/command`	Show the application commands.
`Version`	`/version`	Show the application version.
`Documentation`	`/doc`	Show the documentation.
`Report`	`/report`	Report issues.
`Restart`	`/restart`	Deploy the application. The `VERCEL_DEPLOY_HOOK_URL` environment variable is required.

Sum Commands

Name	Alias	Description
`Sum`	`/sum`	Ask AI Assistant to give a "summarize" response
`Advise`	`/advise`	Ask AI Assistant to give a "advise" response
`Apologize`	`/apologize`	Ask AI Assistant to give a "apologize" response
`Blame`	`/blame`	Ask AI Assistant to give a "blame" response
`Comfort`	`/comfort`	Ask AI Assistant to give a "comfort" response
`Complain`	`/complain`	Ask AI Assistant to give a "complain" response
`Laugh`	`/laugh`	Ask AI Assistant to give a "laugh" response
`Encourage`	`/encourage`	Ask AI Assistant to give a "encourage" response

Analyze Commands

Name	Alias	Description
`Analyze`	`/analyze`	Ask AI Assistant to analyze
`Analyze literarily`	`/analyze-literarily`	Ask AI Assistant to analyze literarily
`Analyze mathematically`	`/analyze-mathematically`	Ask AI Assistant to analyze mathematically
`Analyze numerologically`	`/analyze-numerologically`	Ask AI Assistant to analyze numerologically
`Analyze philosophically`	`/analyze-philosophically`	Ask AI Assistant to analyze philosophically
`Analyze psychologically`	`/analyze-psychologically`	Ask AI Assistant to analyze psychologically

Translate Commands

Name	Alias	Description
`Translate to English`	`/translate-to-en`	Ask AI Assistant to translate text to English
`Translate to Japanese`	`/translate-to-ja`	Ask AI Assistant to translate text to Japanese

Environment Variables

Set environment variables to change program settings.

Name	Default Value	Description
`APP_DEBUG`	`false`	Print prompt to console. The value must be `true` of `false`.
`APP_WEBHOOK_PATH`	`/webhook`	Custom webhook URL path of application.
`APP_LANG`	`zh`	Application language. The value must be one of `zh`, `en` or `ja`.
`APP_MAX_GROUPS`	`1`	Maximum groups. The `VERCEL_ACCESS_TOKEN` environment variable is required.
`APP_MAX_USERS`	`5`	Maximum users. The `VERCEL_ACCESS_TOKEN` environment variable is required.
`BOT_NAME`	`AI`	Name of AI Assistant. This is used to call AI Assistant when auto-reply is deactivated.
`VERCEL_PROJECT_NAME`	`gpt-ai-assistant`	Custom Vercel project name. You can use this environment variable when the Vercel project name differs from the GitHub project name.
`VERCEL_ACCESS_TOKEN`	`null`	Vercel access token
`VERCEL_DEPLOY_HOOK_URL`	`null`	Vercel deploy hook URL
`OPENAI_API_KEY`	`null`	OpenAI API key
`OPENAI_COMPLETION_MODEL`	`text-davinci-003`	Refer to model parameter for details.
`OPENAI_COMPLETION_TEMPERATURE`	`0.9`	Refer to temperature parameter for details.
`OPENAI_COMPLETION_MAX_TOKENS`	`160`	Refer to max_tokens parameter for details.
`OPENAI_COMPLETION_FREQUENCY_PENALTY`	`0`	Refer to frequency_penalty parameter for details.
`OPENAI_COMPLETION_PRESENCE_PENALTY`	`0.6`	Refer to presence_penalty parameter for details.
`OPENAI_IMAGE_GENERATION_SIZE`	`256x256`	Refer to size parameter for details.
`LINE_CHANNEL_ACCESS_TOKEN`	`null`	LINE channel access token
`LINE_CHANNEL_SECRET`	`null`	LINE channel secret

Click the "Redeploy" button to redeploy if there are any changes.

Debug

Check if the environment variables of the project are filled out correctly in the Vercel.
Click the "Redeploy" button to redeploy if there are any changes.
If there is still a problem, please go to Issues page, describe your problem and attach a screenshot.

Related Projects

Nyan Profile: A simple and extensible scaffold for building personal profile website.

Memo Chou — Sun, 27 Nov 2022 14:10:52 +0000

Nyan Profile

About

Nyan Profile is a simple and extensible scaffold for building personal profile website.

Demo

https://memochou1993.github.io/nyan-profile/

Repository

https://github.com/memochou1993/nyan-profile

Features

Static Generation with Next.js
Styling with Tailwind CSS
Configurable Components
- Profile
- Header
- Theme Switch
- Sidebar
- Footer
- About
- Google Fonts
- Google Analytics
- Project List
- Article List
Deploying to GitHub Pages with GitHub Actions

Getting Started

Automatic Setup

Create a new project by running the following command.

npm init @memochou1993/nyan-profile my-profile

Change directory into project.

cd my-profile

Start the development server.

npm run dev

Manual Setup

Clone the project.

git clone git@github.com:memochou1993/nyan-profile.git

Change directory into project.

cd nyan-profile

Initialize a new Git repository.

rm -rf .git
git init
git add .
git commit -m "Initial commit"

Install dependencies.

npm ci

Start the development server.

npm run dev

Learn More

https://github.com/memochou1993/nyan-profile#readme