CourseFacts Brain Markdown Demo Stack

Why this note exists

This page is a local-only showcase for the strongest practical CourseFacts markdown stack. It is meant to be opened inside the brain workspace first, then compared with the canonical blog article view.

If the stack is working, you should be able to jump directly to Best Next.js Courses 2026, Best TypeScript Courses 2026, React - The Complete Guide 2024, Next.js & React - The Complete Guide, and even platform context like Udemy without leaving /brain.

[!note] What this demo is showing This note intentionally mixes wikilinks, callouts, tables, task lists, inline code, and fenced code blocks with titles, captions, line numbers, and line highlighting.

[!tip]+ Suggested reading path Start with the Next.js roundup, branch to Next.js & React - The Complete Guide, then pivot into Best TypeScript Courses 2026 if you want to strengthen the TypeScript layer behind modern React work.

If you want a React-first route instead, open Best React Courses Online 2026 and come back here after.

Markdown features in one place

Here is the feature checklist this note is exercising:

• Velite markdown compilation during build
• Tailwind Typography for blog prose polish
• Custom /brain article enhancement on top of compiled HTML
• Obsidian-style [[wikilinks]]
• Obsidian callout transforms
• Shiki / rehype-pretty-code styling for code blocks
• GFM tables and task list rendering

Example code block

The block below is using a title, caption, line numbers, and highlighted lines. It also includes a literal wikilink string inside the code sample so we can confirm the HTML enhancement layer does not rewrite code content.

import { cache } from "react";
 
type DemoNode = { id: string; slug: string; label: string };
 
export const getDemoNode = cache((nodes: DemoNode[]) => {
  const primary = nodes.find((node) => node.slug === "brain-markdown-demo-stack-2026");
 
  if (primary) {
    return primary;
  }
 
  return {
    id: "post:brain-markdown-demo-stack-2026",
    slug: "brain-markdown-demo-stack-2026",
    label: "[[brain-markdown-demo-stack-2026]] stays literal inside code",
  };
});

A second example uses shell syntax so the code theme has more than one language to render:

#!/usr/bin/env bash
set -euo pipefail
 
bun test
bun run lint
bun run build

And a small diff block makes the demo feel closer to an actual implementation note:

+ add rehype-pretty-code
+ add shiki-backed themed blocks
+ keep wikilinks and callouts in /brain
- rely on generic highlight.js defaults

Callouts that should feel Obsidian-like in the brain

[!warning] Enhancement boundary The /brain article view is intentionally doing one extra pass over compiled HTML. That pass upgrades wikilinks and callouts, but it should leave real links, headings, and code blocks alone.

[!success] Expected local demo result The nicest outcome is a note that still feels like markdown content, but reads more like a polished Obsidian export than a plain blog article.

[!question]- What should you click after this? Good next jumps are Best GitHub Actions / CI/CD Courses 2026, Best Next.js Courses 2026, Next.js & React - The Complete Guide, and Udemy.

You can also verify missing-link styling with a deliberately missing note reference.

Practical takeaway

The local demo stack is strongest when markdown stays author-friendly while the brain reader adds just enough structured enhancement:

1. Author in markdown.
2. Compile with Velite.
3. Render high-quality code blocks with Shiki.
4. Upgrade brain articles with graph-aware wikilinks and Obsidian callouts.
5. Keep the canonical blog page clean and readable too.

That is a better local demo than building a separate note renderer from scratch, because it proves the content pipeline can stay close to normal editorial markdown while still producing a second-brain style reading surface.