Cor.inc Cor.inc
Lab 8 min read

The Complete Markdown Guide: Everything for Blog Post Creation

A complete guide to Markdown syntax and rich content features usable on the Cor.inc blog. Covers all features for creating beautiful articles, including link cards, equations, code highlighting, and more.

Terisuke
Share this article:

The Complete Markdown Guide: Everything You Need for Blog Post Creation

This guide introduces all the Markdown and rich content features available on the Cor.inc blog. Let’s learn the techniques to create beautiful and readable articles.

Basic Markdown Syntax

Headings

# Heading 1 (H1)
## Heading 2 (H2)
### Heading 3 (H3)
#### Heading 4 (H4)

Text Formatting

**Bold text**
*Italic text*
~~Strikethrough~~
`Inline code`

Bold text Italic text Strikethrough Inline code

Lists

Unordered List

- Item 1
- Item 2
  - Subitem 2.1
  - Subitem 2.2
- Item 3
  • Item 1
  • Item 2
    • Subitem 2.1
    • Subitem 2.2
  • Item 3

Ordered List

1. First item
2. Second item
3. Third item
  1. First item
  2. Second item
  3. Third item

Task List

- [x] Completed task
- [ ] Incomplete task
- [ ] Another incomplete task
  • Completed task
  • Incomplete task
  • Another incomplete task

Code Blocks

Basic Code Block

```javascript
function greet(name) {
  console.log(`Hello, ${name}!`);
}

greet('World');
```

Example Output

function greet(name) {
  console.log(`Hello, ${name}!`);
}

greet('World');

Supported Languages

  • JavaScript/TypeScript
  • Python
  • HTML/CSS
  • Bash/Shell
  • JSON/YAML
  • Markdown
  • Many more
# Python example
def calculate_fibonacci(n):
    if n <= 1:
        return n
    return calculate_fibonacci(n-1) + calculate_fibonacci(n-2)

print(calculate_fibonacci(10))

# Bash example
#!/bin/bash
npm run build
npm run deploy

Tables

| Item      | Description          | Price  |
|-----------|----------------------|--------|
| Product A | High-quality product | ¥1,000 |
| Product B | Affordable price     | ¥500   |
| Product C | Premium              | ¥2,000 |
ItemDescriptionPrice
Product AHigh-quality product¥1,000
Product BAffordable price¥500
Product CPremium¥2,000

Table Alignment

| Left-aligned | Center-aligned | Right-aligned |
|:-------------|:--------------:|--------------:|
| Left         |     Center     |         Right |
| L            |       C        |             R |
Left-alignedCenter-alignedRight-aligned
LeftCenterRight
LCR

Quotes

> This is a quote.
> It can span
> multiple lines.

> **Important Quote**
>
> You can also use **Markdown syntax** within a quote.

This is a quote. It can span multiple lines.

Important Quote

You can also use Markdown syntax within a quote.

[Cor.inc Website](https://cor-jp.com)
[Contact Us](/contact)

Cor.inc Website Contact Us

Images

![Alt text](/images/example.jpg)
![Description](/images/example.jpg "Title")

Math Equations (KaTeX)

Inline Equation

The area of a circle is calculated as $A = \pi r^2$.

The area of a circle is calculated as A=πr2A = \pi r^2.

Block Equation

$$
\int_{-\infty}^{\infty} e^{-x^2} dx = \sqrt{\pi}
$$
∫−∞∞e−x2dx=π\int_{-\infty}^{\infty} e^{-x^2} dx = \sqrt{\pi}

Example of Complex Equation

$$
\begin{aligned}
\nabla \times \vec{\mathbf{B}} -\, \frac1c\, \frac{\partial\vec{\mathbf{E}}}{\partial t} &= \frac{4\pi}{c}\vec{\mathbf{j}} \\
\nabla \cdot \vec{\mathbf{E}} &= 4 \pi \rho \\
\nabla \times \vec{\mathbf{E}}\, +\, \frac1c\, \frac{\partial\vec{\mathbf{B}}}{\partial t} &= \vec{\mathbf{0}} \\
\nabla \cdot \vec{\mathbf{B}} &= 0
\end{aligned}
$$
∇×B⃗− 1c ∂E⃗∂t=4πcj⃗∇⋅E⃗=4πρ∇×E⃗ + 1c ∂B⃗∂t=0⃗∇⋅B⃗=0\begin{aligned} \nabla \times \vec{\mathbf{B}} -\, \frac1c\, \frac{\partial\vec{\mathbf{E}}}{\partial t} &= \frac{4\pi}{c}\vec{\mathbf{j}} \\ \nabla \cdot \vec{\mathbf{E}} &= 4 \pi \rho \\ \nabla \times \vec{\mathbf{E}}\, +\, \frac1c\, \frac{\partial\vec{\mathbf{B}}}{\partial t} &= \vec{\mathbf{0}} \\ \nabla \cdot \vec{\mathbf{B}} &= 0 \end{aligned}

Usage

Simply write a URL by itself to automatically generate a rich preview card:

https://cor-jp.com/

https://github.com

https://docs.astro.build

Example

Cor.inc · Pioneering Collaboration Through Innovation
Cor.inc specializes in Python-powered data analysis and Web & Mobile app development, creating innovative, machine learning-enhanced solutions for Innovative people who want to change the world.
favicon cor-jp.com
GitHub · Build and ship software on a single, collaborative platform
Join the world's most widely adopted, AI-powered developer platform where millions of developers, businesses, and the largest open source community build software that advances humanity.
favicon github.com
ogImage
docs.astro.build
favicon docs.astro.build

Features

  • Automatic Metadata Retrieval: Automatically retrieves the title, description, and favicon.
  • OG Image Display: Displays the website’s thumbnail image.
  • Caching Function: Once retrieved, information is cached locally.
  • Responsive: Supports both desktop and mobile.
  • Dark Mode: Automatically adjusts according to the theme.

Horizontal Rule

---

Escape Characters

To prevent characters from being interpreted as Markdown syntax, escape them with a backslash:

\*This will not be italicized\*
\`This will not be code\`
\# This will not be a heading

*This will not be italicized* `This will not be code` # This will not be a heading

Front Matter

At the beginning of the article, write front matter to set metadata:

---
title: "Article Title"
description: "Article description"
pubDate: 2025-01-21
author: "Terisuke"
category: "lab"
tags: ["tag1", "tag2", "tag3"]
# image:
#   url: "/images/blog/example.avif"
#   alt: "Image description"
lang: "ja"
featured: true
---

Category List

  • ai-driven-futures – AI-Driven Futures
  • high-performance-engineering – High-Performance Engineering
  • founders-journey – Founder’s Journey
  • tech-lab-creativity – Tech Lab Creativity

Best Practices

1. Structured Headings

# Main Title (H1 is auto-generated)

## Large Section (H2)

### Subsection (H3)

#### Detail Item (H4)

2. Readable Code

  • Use appropriate language specifications for code blocks.
  • Divide long code into logical units.
  • Add comments for explanations.
  • Only create link cards for highly relevant URLs.
  • Create a reference links section at the end of the article.
  • Choose reliable sources for external links.

4. Visual Elements

  • Use tables to organize information.
  • Emphasize important points with quotes.
  • Separate sections with horizontal rules.

Troubleshooting

Common Problems

  1. Link cards are not displayed.

    • Make sure the URL is on a single line.
    • Make sure it starts with HTTPS.
    • Check if the website is accessible.

  2. Mathematical formulas are not displayed.

    • Check that there are no spaces before and after the $ symbol.
    • Check the escaping of special characters.

  3. Code highlighting does not work.

    • Check for spelling mistakes in the language name.
    • Check the number of backticks (`).

Summary

By utilizing the features introduced in this guide, you can create readable and beautiful blog posts. The link card feature, in particular, is a powerful tool for providing readers with valuable reference materials in a visually appealing way.

Use the following checklist when creating articles:

  • Front matter is correctly set.
  • Heading structure is logical.
  • Code blocks have appropriate language specifications.
  • Link cards are displayed correctly.
  • Mathematical formulas are displayed correctly.
  • Alt attributes are set for images.

If you have any questions about this guide, please contact us.

Support this article

Tip functionality is coming soon. Please stay tuned.

Under development...

Tags

#Markdown #Blog #Writing #Technical Documentation #Guide

Related Posts

Read article
Lab

[Marp×VOICEVOX×VTubeStudio] Zundamon Gave an LT Presentation

Creative use of technology! An experimental project building an automated LT presentation system using Zundamon with a combination of Marp, VOICEVOX, and VTubeStudio.

#Marp #VOICEVOX +3