Writing in Bloggrify: Beyond Basic Markdown

Bloggrify is built on standard Markdown. If you're new to Markdown, it's a lightweight markup language with plain text formatting syntax. It's easy to read and write, and it's widely used in documentation, README files, and blogs.

While Bloggrify is built on standard Markdown, it offers much more powerful writing capabilities. Let's explore how you can enhance your content using advanced features.

MDC: Markdown Components

MDC (Markdown Components) allows you to seamlessly integrate Vue components within your Markdown:

npm run dev

Built-in Components

Bloggrify comes with several pre-built components to enhance your content:

Nuxt-content provide code highlighting with shiki. You can specify the language of the code block to enable syntax highlighting: This is a paragraph with a code block:

var foo = function (bar) {
  return bar++;
};

console.log(foo(5));

It's also possible to display a code block with a specific file name:

  export default () => {
    console.log('Code block')
  }

Tables

Right aligned columns

Links

link text

link with title

Autoconverted link https://www.google.com

Youtube and Twitter embed

You can embed youtube videos and tweets in your markdown files

Links to a channel won't be transformed :

https://youtube.com/@eventuallycoding

Images

This is a paragraph with an image

Emojies

Classic markup: 😉 😢 😆 😋

Footnotes

Footnote 1 link¹.

Footnote 2 link².

Duplicated footnote reference².

Frontmatter

It also supports frontmatter to add metadata to your markdown files.

---
id: "2"
title: "Use markdown power"
description: "Use markdown at its full potential."
date: "2024-02-09"
tags:
  - markdown
  - documentation
cover: "doc/markdown.png"
---

• id is mandatory if you want to use the comment system. It is used to identify the article.
• title and description are used for SEO and social sharing. It's also used on the index page. Don't forget to fill them.
• date is used to sort the articles. Date in the future will not be displayed.
• tags are only used to display the tags on the article page. It's optional.
• cover is used to display an image on the index page. It's also used when you share your article on social media. It's optional (it's however better to have one).

Conclusion

With these features, you can create rich, interactive blog posts while keeping the simplicity of Markdown. Remember, all these features work out of the box - no additional configuration needed!