<!-- CourseFacts AI-readable guide source -->
<!-- Canonical: https://www.coursefacts.com/guides/knowledgebase-markdown-demo-stack-2026 -->
<!-- Raw Markdown: https://www.coursefacts.com/guides/knowledgebase-markdown-demo-stack-2026/raw.md -->
<!-- Source path: content/guides/knowledgebase-markdown-demo-stack-2026.mdx -->

---
og_image: "/images/guides/knowledgebase-markdown-demo-stack-2026.webp"
title: "CourseFacts Knowledgebase Markdown Demo Stack"
description: "Local CourseFacts knowledgebase demo covering Velite MDX, Tailwind Typography, wikilinks, Obsidian callouts, and Shiki code blocks."
date: "2026-04-20"
author: "CourseFacts Team"
tags: ["nextjs", "react", "typescript", "markdown", "obsidian", "github-actions"]
featured_course: "nextjs-react-the-complete-guide"
noindex: true
---

## 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](/guides/best-nextjs-courses-2026), [Best TypeScript Courses 2026](/guides/best-typescript-courses-2026), [React - The Complete Guide 2024](/course/react-the-complete-guide), [Next.js & React - The Complete Guide](/course/nextjs-react-the-complete-guide), and even platform context like [Udemy](/platform/udemy) without leaving `/knowledgebase`.

> [!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](/guides/best-nextjs-courses-2026), branch to [Next.js & React - The Complete Guide](/course/nextjs-react-the-complete-guide), then pivot into [Best TypeScript Courses 2026](/guides/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](/guides/best-react-courses-online-2026) and come back here after.

## Markdown features in one place

Here is the feature checklist this note is exercising:

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

| Feature | Canonical guide page | `/knowledgebase` article view |
| --- | --- | --- |
| Typography | tuned prose classes | tuned prose plus knowledgebase reader chrome |
| Wikilinks | render as plain text in normal markdown flow | upgraded into graph-aware note links |
| Obsidian callouts | readable markdown blockquotes | transformed into styled note-app callouts |
| Code blocks | Shiki rendering | same Shiki rendering inside the enhanced reader |

## 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.

```tsx title="src/lib/knowledgebase/demo-stack.ts" caption="Server-first note resolution with a safe fallback." showLineNumbers {6,11-14}
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:

```bash title="local-validation.sh" caption="The local validation flow requested for this demo." showLineNumbers
#!/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:

```diff title="knowledgebase-rendering.diff"
+ 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

> [!warning] Enhancement boundary
> The `/knowledgebase` 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](/guides/best-github-actions-cicd-courses-2026), [Best Next.js Courses 2026](/guides/best-nextjs-courses-2026), [Next.js & React - The Complete Guide](/course/nextjs-react-the-complete-guide), and [Udemy](/platform/udemy).
>
> You can also verify missing-link styling with [a deliberately missing note reference](#practical-takeaway).

## 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.