CourseFacts Knowledgebase 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 knowledgebase 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 /knowledgebase.

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 /knowledgebase 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 === "knowledgebase-markdown-demo-stack-2026");
 
  if (primary) {
    return primary;
  }
 
  return {
    id: "post:knowledgebase-markdown-demo-stack-2026",
    slug: "knowledgebase-markdown-demo-stack-2026",
    label: "[[knowledgebase-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 /knowledgebase
- rely on generic highlight.js defaults

Callouts that should feel Obsidian-like in the knowledgebase

Practical takeaway

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

1. Author in markdown.
2. Compile with Velite.
3. Render high-quality code blocks with Shiki.
4. Upgrade knowledgebase articles with graph-aware wikilinks and Obsidian callouts.
5. Keep the canonical guide 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.