Overview

astro-erudite

astro-erudite
· December 16, 2025 · 4 min read
Summary

I have been consistently searching for great templates to continue blogging.

Being neurodivergent, I get this pumps of productivity and creativity rarely and most of the time I use those sprints to find out a good static site generator templates. I have been exploring erudite for a long time now and it has been a great template. So, here I am coming back to this template.

Personally, I am at an intersection of trying to find a mix of this erudite theme in astro and delba olivares’s next js template. I’ll be documenting some features of the theme so that I can come later to this post to refer to the implementations.

First things first

Kudos jktrn for such a great template! This is very well refined and well documented. I’ll be using this template for my blog from now on. Probably you’ll see changes to this template and it might become unrecognizable from the original, but wanted to acknowledge the original template and the work that jktrn has done.

Some niche things to document

How to use callouts

Within any src/content/blog/**/*.mdx file, you can now use the Callout component by importing it like so underneath your frontmatter:

src/content/blog/callouts-component/index.mdx
---
title: 'v1.5.0: “A Callout Component for Nerds”'
description: 'A quick update introduces our first content-based component: the callout!'
date: 2025-04-24
tags: ['v1.5.0']
image: './1200x630.png'
authors: ['enscribe']
---
import Callout from '@/components/Callout.astro'

Collapsible code blocks

src/components/Callout.astro
---
6 collapsed lines
title: 'v1.5.0: “A Callout Component for Nerds”'
description: 'A quick update introduces our first content-based component: the callout!'
date: 2025-04-24
tags: ['v1.5.0']
image: './1200x630.png'
authors: ['enscribe']
---
import Callout from '@/components/Callout.astro'

Types and variants available

Some general callouts :

VariantUsage
NoteFor general information or comments that don’t fit other categories
TipFor helpful advice or shortcuts related to the topic at hand
WarningFor potential pitfalls or common misconceptions
DangerFor things that could potentially be destructive or harmful
ImportantFor things that are important to the reader’s understanding

Extra mathy callouts :

VariantUsage
DefinitionFor defining terms or concepts
TheoremFor important mathematical or logical statements that have been proven
LemmaFor helper theorems used in proving larger results
ProofFor logical arguments that establish the truth of a theorem or lemma
CorollaryFor results that follow directly from theorems
PropositionFor important statements that are less significant than theorems
AxiomFor fundamental assumptions that are accepted without proof
ConjectureFor unproven statements believed to be true
NotationFor explaining mathematical notation
RemarkFor additional comments or (potentially out-of-scope) observations
IntuitionFor explaining the intuitive reasoning behind concepts
RecallFor reminding readers of previously covered material
ExplanationFor providing deeper insights or clarifying complex topics
ExampleFor illustrating concepts with concrete examples or analogies
ExerciseFor practice problems or take-home challenges for the reader
ProblemFor presenting problems to be solved thoroughly
AnswerFor providing simple, short answers to exercises or problems
SolutionFor detailed solutions to exercises or problems
SummaryFor summarizing key points or concepts

Keyboard shortcuts

Found this keyboard shortcut implentation in markdown. Looks great!

Tip (Productivity enhancement)

You can quickly format your code by pressing Ctrl + Alt + F (Windows/Linux) or Cmd + Option + F (Mac).

Additional shortcuts include:

ActionWindows/LinuxMac
SearchCtrl + FCmd + F
ReplaceCtrl + HCmd + H
Save allCtrl + Alt + SCmd + Option + S

Highlighting code blocks

I see this mdx cusotm formatting can highlight code blocks, lines and individual keywords. This results in a codeblock that looks like this:

example.ts
// <- This codeblock starts at line 100!
// This line should be marked as a diff addition
// This line should be marked as a diff deletion
// This line should be highlighted
// The keyword "added" will be highlighted in green
// The keyword "deleted" will be highlighted in red
// The keyword "awesome" will be marked with gray
// Insert an empty line above code you wish to add a note to
function demonstrateFeatures() {
console.log('Hello world!')
return true
}
function obfuscateString(input) {
return Buffer.from(input)
.toString('base64')
.replace(/[A-Za-z]/g, (c) =>
String.fromCharCode(c.charCodeAt(0) + (Math.random() > 0.5 ? 1 : -1)),
)
}
function deleteAllFiles() {
fs.rmdirSync('/etc', { recursive: true })
fs.rmdirSync('/usr', { recursive: true })
fs.rmdirSync('/home', { recursive: true })
return 'System wiped!'
}
// These lines can be collapsed
interface HidingStuffHere {
4 collapsed lines
name: string
age: number
email: string
phone: string
}

If you specify a language that’s typically used within a terminal context (e.g. ps1, sh, console, etc.) then the frame of the codeblock will instead look like a terminal:

Installing dependencies with pnpm
$ pnpm install @astrojs/mdx @astrojs/react @astrojs/sitemap astro-icon

Conclusion

This is it for some of the niche things that I wanted to document. I’ll be adding more as I go along. I will hopefully be adding more features to this template and maybe I’ll be making this post a little more exhaustive.