#Introduction

#What is Velora?

It is an open-source blog template. The core tech stack uses Next.js, Tailwind CSS, Velite, MDX, Shiki, and Rehype Pretty Code. With Velite, you can create a blog with a type-safe data layer, as it is defined using TypeScript and Zod for schema validation. See the Velite docs for more information.

Velora provides a blog template with all the essential features built-in. This means you don't need to build a content pipeline from scratch; Velora includes pre-built components and utilities to help you get your blog running immediately.

#History

The author started this project in December 2025 to redesign his portfolio and blog page. His previous portfolio and blog page used a tech stack consisting of Next.js, Tailwind CSS, and Markdown.

However, the previous setup required significant manual configuration for frontmatter and syntax highlighting (using highlight.js), and the code blocks were limited to basic highlighting. After researching ways to create a richer code block experience—including features like line numbers, word/line highlighting, and diff notation—the author discovered Shiki and Rehype Pretty Code. These libraries are the core of modern code block tools like Expressive Code and Nextra.

Shiki is a powerful syntax highlighter, while Rehype Pretty Code is a plugin that transforms Markdown into HTML with specialized classes and attributes.

After learning about these capabilities, the author became interested in building a sample blog using Next.js, Tailwind CSS, and MDX. To overcome the difficulties of configuring these plugins, he found a helpful YouTube video by Jolly Coding and its accompanying repository, nextjs-velite-blog-template.

Following that tutorial made everything click. The most impressive part of this setup is how easily the plugins can be configured and how Velite acts as a seamless content pipeline, making MDX content easy to maintain, parse, and extend with custom React components.

#Why Choose Shiki and Rehype Pretty Code?

After doing some research, the author explored several options for syntax highlighting, such as highlight.js, Prism.js, and Code Hike. However, after reviewing their configurations, the author found that Shiki and Rehype Pretty Code were the best options.

What makes Shiki particularly interesting is that it uses the same engine that powers VS Code: TextMate Grammars. This provides some of the most accurate and beautiful syntax highlighting available; you can read more about Shiki's history here. The best part is that Shiki is static rather than runtime-based. It’s fast and doesn't require loading additional files because it’s bundled during the build process—unlike highlight.js or Prism.js, which typically run in the browser and can impact performance.

Rehype Pretty Code is a plugin that transforms Markdown into HTML with specialized classes and attributes. It provides features like line numbers, line highlighting, and word highlighting. The ecosystem also supports advanced features like diff notation via @shiki/transformers and interactive TypeScript code samples via @shiki/twoslash.

Finally, the author observed that many modern documentation sites are migrating to Shiki and Rehype for their superior syntax highlighting capabilities.

#Key Features

• MDX Components
• Shadcn UI
• Pagination
• Dynamic Open Graph Image (for SEO)
• Very Rich Code Block
  • Syntax Highlighting using Shiki and Rehype
    • Line numbers
    • Line highlighting
    • Word highlighting
    • ANSI Highlighting
    • Word Group Highlighting (based on id #v for variable, #s for state, #i for identifier)
    • Inline Diff / Diff Notation Highlighting
    • Focused and Unfocused lines
    • Error and Warning Highlighting
    • Inline Code with language
    • Nested Code Block
  • Title Bar
  • Copy Button
  • Custom Title Name
  • Custom Font with Ligatures support
  • Custom Language Icon
  • Code Group
• Docker support
• Velite Integration for Content Pipeline
• Giscus Integration for Discussion Section