Page not found.
10 |11 | For older versions try:{" "} 12 | 13 | {v0url} 14 | 15 |
16 |
10 | hey
11 |
12 | )
13 | ```
14 |
--------------------------------------------------------------------------------
/apps/web/content/docs/meta.json:
--------------------------------------------------------------------------------
1 | {
2 | "title": "Docs",
3 | "pages": [
4 | "index",
5 | "concepts/blocks",
6 | "concepts/code",
7 | "concepts/annotations",
8 | "concepts/utils",
9 | "---Examples---",
10 | "code",
11 | "layouts",
12 | "examples"
13 | ]
14 | }
15 |
--------------------------------------------------------------------------------
/packages/recma/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "recma-codehike",
3 | "version": "0.0.1",
4 | "main": "index.js",
5 | "type": "module",
6 | "sideEffects": false,
7 | "license": "MIT",
8 | "repository": "code-hike/codehike",
9 | "dependencies": {
10 | "codehike": "*"
11 | }
12 | }
13 |
--------------------------------------------------------------------------------
/packages/remark/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "remark-codehike",
3 | "version": "0.0.1",
4 | "main": "index.js",
5 | "type": "module",
6 | "sideEffects": false,
7 | "license": "MIT",
8 | "repository": "code-hike/codehike",
9 | "dependencies": {
10 | "codehike": "*"
11 | }
12 | }
13 |
--------------------------------------------------------------------------------
/apps/web/demos/classname/content.md:
--------------------------------------------------------------------------------
1 | ```js
2 | function lorem(ipsum, dolor = 1) {
3 | // !className line-through
4 | const sit = ipsum == null ? 0 : ipsum.sit
5 | dolor = sit - amet(dolor)
6 | // !className[/sit/] bg-red-700 rounded-lg px-1
7 | return sit ? consectetur(ipsum) : []
8 | }
9 | ```
10 |
--------------------------------------------------------------------------------
/apps/web/demos/mark/content.md:
--------------------------------------------------------------------------------
1 | ```js
2 | function lorem(ipsum, dolor = 1) {
3 | // !mark
4 | return dolor
5 | }
6 |
7 | function ipsum(lorem, dolor = 1) {
8 | // !mark(1:2) gold
9 | const sit = lorem == null ? 0 : lorem.sit
10 | dolor = sit - amet(dolor)
11 | // !mark[/sit/] pink
12 | return sit ? consectetur(lorem) : []
13 | }
14 | ```
15 |
--------------------------------------------------------------------------------
/packages/codehike/tests/md-suite/inline-code.0.mdx:
--------------------------------------------------------------------------------
1 | ---
2 | snapshots:
3 | - before-remark
4 | - compiled-jsx
5 | - rendered
6 | ---
7 |
8 | _`var x = 1`_
9 |
10 | hello _html`hey
`_ world
11 |
12 | two lines _`var x = 1
13 | var y = 2`_
14 |
15 | extra meta _jsx foo`var x = 1`bar bar_
16 |
17 | lorem _just emphasize_ ipsum
18 |
--------------------------------------------------------------------------------
/.github/scripts/params.mjs:
--------------------------------------------------------------------------------
1 | export const PACKAGE_NAME = "codehike"
2 | export const VERSION_COMMAND = "pnpm version-packages"
3 | export const PUBLISH_COMMAND = "pnpm release"
4 | export const RELEASE_BRANCH = "release"
5 | export const BASE_BRANCH = "next"
6 | export const PACKAGE_DIR = `packages/${PACKAGE_NAME}`
7 |
8 | export const IDENTIFIER = ""
9 |
--------------------------------------------------------------------------------
/packages/codehike/tests/md-suite/basic.2.before-remark.json:
--------------------------------------------------------------------------------
1 | {
2 | "type": "root",
3 | "children": [
4 | {
5 | "type": "heading",
6 | "depth": 1,
7 | "children": [{ "type": "text", "value": "Lorem" }]
8 | },
9 | {
10 | "type": "paragraph",
11 | "children": [{ "type": "text", "value": "!hello world" }]
12 | }
13 | ]
14 | }
15 |
--------------------------------------------------------------------------------
/apps/web/demos/tabs/content.mdx:
--------------------------------------------------------------------------------
1 |
3 | console.
4 | log
5 | (
6 | 1
7 | )
8 |
9 | hey
`_ world
12 |
13 | two lines _`var x = 1
14 | var y = 2`_
15 |
16 | extra meta _jsx foo`var x = 1`bar bar_
17 |
18 | lorem _just emphasize_ ipsum
19 |
--------------------------------------------------------------------------------
/apps/web/app/test/page.tsx:
--------------------------------------------------------------------------------
1 | import { LatestSponsor } from "../landing/sponsors"
2 | import Content from "./content.md"
3 | import { Code } from "@/components/code"
4 |
5 | export default function Page() {
6 | return (
7 |
8 |
12 | )
13 | }
14 |
--------------------------------------------------------------------------------
/apps/web/components/ui/collapsible.tsx:
--------------------------------------------------------------------------------
1 | "use client"
2 |
3 | import * as CollapsiblePrimitive from "@radix-ui/react-collapsible"
4 |
5 | const Collapsible = CollapsiblePrimitive.Root
6 |
7 | const CollapsibleTrigger = CollapsiblePrimitive.CollapsibleTrigger
8 |
9 | const CollapsibleContent = CollapsiblePrimitive.CollapsibleContent
10 |
11 | export { Collapsible, CollapsibleTrigger, CollapsibleContent }
12 |
--------------------------------------------------------------------------------
/.changeset/config.json:
--------------------------------------------------------------------------------
1 | {
2 | "$schema": "https://unpkg.com/@changesets/config@3.0.0/schema.json",
3 | "changelog": [
4 | "@changesets/changelog-github",
5 | { "repo": "code-hike/codehike" }
6 | ],
7 | "commit": false,
8 | "fixed": [],
9 | "linked": [],
10 | "access": "restricted",
11 | "baseBranch": "main",
12 | "updateInternalDependencies": "patch",
13 | "ignore": ["web"]
14 | }
15 |
--------------------------------------------------------------------------------
/apps/web/demos/slideshow/.prettierrc:
--------------------------------------------------------------------------------
1 | {
2 | "trailingComma": "all",
3 | "semi": false,
4 | "overrides": [
5 | {
6 | "files": ["*.md"],
7 | "options": {
8 | "printWidth": 42,
9 | "semi": false
10 | }
11 | },
12 | {
13 | "files": ["*.tsx"],
14 | "options": {
15 | "printWidth": 60,
16 | "semi": false
17 | }
18 | }
19 | ]
20 | }
21 |
--------------------------------------------------------------------------------
/apps/web/demos/spotlight/.prettierrc:
--------------------------------------------------------------------------------
1 | {
2 | "trailingComma": "all",
3 | "semi": false,
4 | "overrides": [
5 | {
6 | "files": ["*.md"],
7 | "options": {
8 | "printWidth": 42,
9 | "semi": false
10 | }
11 | },
12 | {
13 | "files": ["*.tsx"],
14 | "options": {
15 | "printWidth": 60,
16 | "semi": false
17 | }
18 | }
19 | ]
20 | }
21 |
--------------------------------------------------------------------------------
/apps/web/components/annotations/link.tsx:
--------------------------------------------------------------------------------
1 | import { AnnotationHandler } from "codehike/code"
2 | import Link from "next/link"
3 |
4 | export const link: AnnotationHandler = {
5 | name: "link",
6 | Inline: ({ annotation, children }) => {
7 | const { query } = annotation
8 |
9 | return (
10 |
11 | {children}
12 |
13 | )
14 | },
15 | }
16 |
--------------------------------------------------------------------------------
/apps/web/content/components/.prettierrc:
--------------------------------------------------------------------------------
1 | {
2 | "trailingComma": "all",
3 | "semi": false,
4 | "overrides": [
5 | {
6 | "files": ["*.mdx"],
7 | "options": {
8 | "printWidth": 42,
9 | "semi": false
10 | }
11 | },
12 | {
13 | "files": ["*.tsx"],
14 | "options": {
15 | "printWidth": 60,
16 | "semi": false
17 | }
18 | }
19 | ]
20 | }
21 |
--------------------------------------------------------------------------------
/apps/web/demos/annotations/regex/content.md:
--------------------------------------------------------------------------------
1 | ```js
2 | // !border[/ipsum/] yellow
3 | const lorem = ipsum == null ? ipsum : 1
4 | // !border[/dolor/g] lime
5 | dolor = lorem - sit(dolor)
6 | let amet = dolor ? consectetur(ipsum) : 3
7 | ```
8 |
9 | ```js
10 | // !border[/ipsum/gm] orange
11 | const lorem = ipsum == null ? ipsum : 1
12 | dolor = lorem - sit(dolor)
13 | let amet = dolor ? consectetur(ipsum) : 3
14 | ```
15 |
--------------------------------------------------------------------------------
/apps/web/demos/api-reference/.prettierrc:
--------------------------------------------------------------------------------
1 | {
2 | "trailingComma": "all",
3 | "semi": false,
4 | "overrides": [
5 | {
6 | "files": ["*.md"],
7 | "options": {
8 | "printWidth": 42,
9 | "semi": false
10 | }
11 | },
12 | {
13 | "files": ["*.tsx"],
14 | "options": {
15 | "printWidth": 60,
16 | "semi": false
17 | }
18 | }
19 | ]
20 | }
21 |
--------------------------------------------------------------------------------
/apps/web/demos/scrollycoding/.prettierrc:
--------------------------------------------------------------------------------
1 | {
2 | "trailingComma": "all",
3 | "semi": false,
4 | "overrides": [
5 | {
6 | "files": ["*.md"],
7 | "options": {
8 | "printWidth": 42,
9 | "semi": false
10 | }
11 | },
12 | {
13 | "files": ["*.tsx"],
14 | "options": {
15 | "printWidth": 60,
16 | "semi": false
17 | }
18 | }
19 | ]
20 | }
21 |
--------------------------------------------------------------------------------
/apps/web/demos/collapse/content.md:
--------------------------------------------------------------------------------
1 | ```js
2 | // !collapse(1:4)
3 | function lorem(ipsum, dolor = 1) {
4 | const sit = ipsum == null ? 0 : 1
5 | dolor = sit - amet(dolor)
6 | return sit ? consectetur(ipsum) : []
7 | }
8 |
9 | // !collapse(1:4) collapsed
10 | function ipsum(ipsum, dolor = 1) {
11 | const sit = ipsum == null ? 0 : 1
12 | dolor = sit - amet(dolor)
13 | return sit ? consectetur(ipsum) : []
14 | }
15 | ```
16 |
--------------------------------------------------------------------------------
/apps/web/components.json:
--------------------------------------------------------------------------------
1 | {
2 | "$schema": "https://ui.shadcn.com/schema.json",
3 | "style": "default",
4 | "rsc": true,
5 | "tsx": true,
6 | "tailwind": {
7 | "config": "tailwind.config.ts",
8 | "css": "app/global.css",
9 | "baseColor": "zinc",
10 | "cssVariables": false,
11 | "prefix": ""
12 | },
13 | "aliases": {
14 | "components": "@/components",
15 | "utils": "@/lib/utils"
16 | }
17 | }
18 |
--------------------------------------------------------------------------------
/apps/web/demos/focus/page.tsx:
--------------------------------------------------------------------------------
1 | import { RawCode, highlight } from "codehike/code"
2 | import Content from "./content.md"
3 | import { CodeContainer } from "./code"
4 |
5 | export default function Page() {
6 | return {new Date().toString()}
9 | 7 | hello 8 |
9 |10 | hey 11 |
12 |
9 | hello, world
10 | 
11 |
12 | ),
13 | {
14 | width: 600,
15 | height: 400,
16 | },
17 | )
18 | }
19 |
--------------------------------------------------------------------------------
/apps/web/app/api/revalidate/sponsors/route.ts:
--------------------------------------------------------------------------------
1 | import { revalidatePath } from "next/cache"
2 |
3 | export async function POST(request: Request) {
4 | try {
5 | const text = await request.text()
6 | console.log("[GitHub] Webhook received", text)
7 |
8 | revalidatePath("/")
9 | } catch (error: any) {
10 | return new Response(`Webhook error: ${error.message}`, {
11 | status: 400,
12 | })
13 | }
14 |
15 | return new Response("Success!", {
16 | status: 200,
17 | })
18 | }
19 |
--------------------------------------------------------------------------------
/apps/web/app/api/revalidate/test/route.ts:
--------------------------------------------------------------------------------
1 | import { revalidatePath } from "next/cache"
2 |
3 | export async function POST(request: Request) {
4 | try {
5 | const text = await request.text()
6 | console.log("[GitHub] Webhook received", text)
7 |
8 | revalidatePath("/test")
9 | } catch (error: any) {
10 | return new Response(`Webhook error: ${error.message}`, {
11 | status: 400,
12 | })
13 | }
14 |
15 | return new Response("Success!", {
16 | status: 200,
17 | })
18 | }
19 |
--------------------------------------------------------------------------------
/apps/web/components/annotations/focus.tsx:
--------------------------------------------------------------------------------
1 | import { AnnotationHandler, InnerLine } from "codehike/code"
2 | import { PreWithRef } from "./focus.client"
3 |
4 | export const focus: AnnotationHandler = {
5 | name: "focus",
6 | PreWithRef,
7 | onlyIfAnnotated: true,
8 | Line: (props) => (
9 |
11 |
15 |
16 | hey
17 |
18 | ho
19 |
20 | ## !foo
21 |
22 | bar
23 |
24 |
25 |
26 | 9 | -------------------------------------------------------------------------------- /packages/codehike/tests/md-suite/only-if-annotated.9.rendered.html: -------------------------------------------------------------------------------- 1 |const a = 1 8 |const b = 2
7 |a 6 |b
13 | -------------------------------------------------------------------------------- /apps/web/demos/focus/focus.tsx: -------------------------------------------------------------------------------- 1 | import { AnnotationHandler, InnerLine } from "codehike/code" 2 | import { PreWithFocus } from "./focus.client" 3 | 4 | export const focus: AnnotationHandler = { 5 | name: "focus", 6 | onlyIfAnnotated: true, 7 | PreWithRef: PreWithFocus, 8 | Line: (props) => ( 9 |a 12 |b
4 | const
5 | a
6 | =
7 | 1
8 |
9 |
10 | const
11 | b
12 | =
13 | 2
14 |
15 |
14 |
17 | )
18 | }
19 |
--------------------------------------------------------------------------------
/apps/web/app/docs/[[...slug]]/code-example.tsx:
--------------------------------------------------------------------------------
1 | import { Block, parseRoot } from "codehike/blocks"
2 | import React from "react"
3 |
4 | const ContentSchema = Block.extend({})
5 |
6 | export function CodeExample({ MDX }: { MDX: any }) {
7 | const { children } = parseRoot(MDX, ContentSchema, {
8 | components: { PreviewContainer },
9 | })
10 |
11 | return children
12 | }
13 |
14 | function PreviewContainer({ children }: { children: React.ReactNode }) {
15 | return (
16 |
17 | {children}
18 |
19 | )
20 | }
21 |
--------------------------------------------------------------------------------
/apps/web/components/annotations/fold.client.tsx:
--------------------------------------------------------------------------------
1 | "use client"
2 |
3 | import { AnnotationHandler } from "codehike/code"
4 | import { useState } from "react"
5 |
6 | export const InlineFold: AnnotationHandler["Inline"] = ({
7 | annotation,
8 | children,
9 | }) => {
10 | const [folded, setFolded] = useState(true)
11 | if (!folded) {
12 | return children
13 | }
14 | return (
15 |
23 | )
24 | }
25 |
--------------------------------------------------------------------------------
/apps/web/demos/filename/page.tsx:
--------------------------------------------------------------------------------
1 | import { RawCode, Pre, highlight } from "codehike/code"
2 | import Content from "./content.md"
3 |
4 | export default function Page() {
5 | return
12 |
17 | )
18 | }
19 |
--------------------------------------------------------------------------------
/apps/web/demos/tooltip/content.mdx:
--------------------------------------------------------------------------------
1 |
13 | {highlighted.meta}
14 |
15 |
16 |
13 | {annotation?.query}
14 |
15 |
16 |
17 |
18 |
19 | )
20 | }
21 |
--------------------------------------------------------------------------------
/apps/web/demos/link/page.tsx:
--------------------------------------------------------------------------------
1 | import { RawCode, Pre, highlight, AnnotationHandler } from "codehike/code"
2 | import Content from "./content.md"
3 |
4 | export default function Page() {
5 | return
19 | {props.children}
20 |
21 |
11 |
21 | )
22 | }
23 |
--------------------------------------------------------------------------------
/apps/web/demos/copy-button/button.tsx:
--------------------------------------------------------------------------------
1 | "use client"
2 |
3 | import { Copy, Check } from "lucide-react"
4 | import { useState } from "react"
5 |
6 | export function CopyButton({ text }: { text: string }) {
7 | const [copied, setCopied] = useState(false)
8 |
9 | return (
10 |
25 | )
26 | }
27 |
--------------------------------------------------------------------------------
/packages/codehike/tests/md-suite/import-code.0.render.tsx:
--------------------------------------------------------------------------------
1 | import { MDXContent } from "mdx/types"
2 | import { AnnotationHandler, highlight, Pre, RawCode } from "../../src/code"
3 | import React from "react"
4 |
5 | export function render(Content: MDXContent) {
6 | // @ts-ignore
7 | return
12 |
19 |
13 | {left.children}
14 |
15 |
16 | {right.children}
17 |
18 | {caption?.children}
20 |
6 | Don't have time to build it yourself? Get a documentation component
7 | library customized for your tech stack and design system.
8 |
18 |
19 | )
20 | }
21 |
--------------------------------------------------------------------------------
/apps/web/app/landing/logo.uidev.svg:
--------------------------------------------------------------------------------
1 |
--------------------------------------------------------------------------------
/apps/web/app/landing/sponsors/oc-sponsors.js:
--------------------------------------------------------------------------------
1 | const parseCSV = require("./csv")
2 | const path = require("path")
3 |
4 | function getSponsors() {
5 | // https://opencollective.com/codehike/transactions?type=CREDIT
6 | const data = parseCSV(path.join(__dirname, "./codehike-transactions.csv"))
7 |
8 | const transactions = data.map((d) => ({
9 | date: d["date"],
10 | name: d["oppositeAccountSlug"],
11 | amount: parseInt(d["amount"]),
12 | }))
13 |
14 | const totals = {}
15 | transactions.forEach((t) => {
16 | totals[t.name] = (totals[t.name] || 0) + t.amount
17 | })
18 |
19 | const list = []
20 | for (let name in totals) {
21 | list.push({ name, amount: Math.round(totals[name]) })
22 | }
23 |
24 | return list
25 | }
26 |
27 | module.exports = getSponsors
28 |
--------------------------------------------------------------------------------
/packages/codehike/tests/md-suite/indentation.0.render.tsx:
--------------------------------------------------------------------------------
1 | import { MDXContent } from "mdx/types"
2 | import {
3 | AnnotationHandler,
4 | highlight,
5 | InnerLine,
6 | Pre,
7 | RawCode,
8 | } from "../../src/code"
9 | import React from "react"
10 |
11 | export function render(Content: MDXContent) {
12 | // @ts-ignore
13 | return
23 |
28 | )
29 | }
30 | ```
31 |
--------------------------------------------------------------------------------
/apps/web/app/docs/[[...slug]]/preview-implementation.tsx:
--------------------------------------------------------------------------------
1 | import { Block, parseRoot } from "codehike/blocks"
2 | import React from "react"
3 | import { z } from "zod"
4 | import { Demo } from "@/components/demo"
5 | import { Pre, RawCode, highlight } from "codehike/code"
6 | import { CopyButton } from "@/components/copy-button"
7 | import { ComponentPackLink } from "@/components/component-pack-link"
8 |
9 | const ContentSchema = Block.extend({
10 | demo: Block,
11 | implementation: Block,
12 | })
13 |
14 | export function PreviewImplementation({ MDX }: { MDX: any }) {
15 | const { demo, implementation } = parseRoot(MDX, ContentSchema, {
16 | components: { Demo },
17 | })
18 |
19 | return (
20 | <>
21 | {demo.children}
22 |
24 | {highlighted.meta}
25 |
26 |
27 | Implementation
23 | {implementation.children} 24 | 25 | ) 26 | } 27 | -------------------------------------------------------------------------------- /packages/codehike/tests/md-suite/basic.7.compiled-jsx.jsx: -------------------------------------------------------------------------------- 1 | /*@jsxRuntime automatic @jsxImportSource react*/ 2 | function _createMdxContent(props) { 3 | const _components = { 4 | h1: "h1", 5 | slot: "slot", 6 | ...props.components, 7 | } 8 | const _blocks = { 9 | children: <_components.h1>{"Lorem"}, 10 | title: "", 11 | _data: { 12 | header: "", 13 | }, 14 | hello: "world", 15 | } 16 | if (props._returnBlocks) { 17 | return _blocks 18 | } 19 | return _blocks.children 20 | } 21 | export default function MDXContent(props = {}) { 22 | const { wrapper: MDXLayout } = props.components || {} 23 | return MDXLayout ? ( 24 |{children}
23 | ),
24 | Inline: ({ annotation, children }) => (
25 | {children}
26 | ),
27 | }
28 |
--------------------------------------------------------------------------------
/apps/web/content/blog/markdown.mdx:
--------------------------------------------------------------------------------
1 | ---
2 | title: Skeuomorphic Markdown
3 | description: Breaking the shackles of static content.
4 | date: 2023-12-24
5 | authors: [pomber]
6 | draft: true
7 | ---
8 |
9 | This is how markdown is usually used:
10 |
11 | ```js
12 | import { frontmatter, Content } from "./some.md"
13 | ```
14 |
15 | Examples:
16 |
17 | - https://docs.astro.build/en/guides/content-collections/
18 | - https://contentlayer.dev/docs/concepts/content-modeling-dc68721f
19 | - https://nuejs.org/blog/introducing-nuemark/
20 |
21 | One of the reasons why markdown has so good authoring experience is because of its focus on content, as oppose to presentation.
22 |
23 | This suits linear layouts, but it's not enough for more complex layouts. For more complex layouts we need to group pieces of content in sections, and put those sections in a hierarchy.
24 |
--------------------------------------------------------------------------------
/apps/web/demos/annotations/regex/page.tsx:
--------------------------------------------------------------------------------
1 | import Content from "./content.md"
2 | import { RawCode, Pre, highlight } from "codehike/code"
3 | import { AnnotationHandler } from "codehike/code"
4 |
5 | export default function Page() {
6 | return
9 |
14 | ))}
15 | />
16 | )
17 | }
18 |
19 | async function Code({ codeblock }: { codeblock: RawCode }) {
20 | const info = await highlight(codeblock, "github-dark")
21 | return (
22 |
26 | )
27 | }
28 |
--------------------------------------------------------------------------------
/apps/web/demos/annotations/groups/page.tsx:
--------------------------------------------------------------------------------
1 | import Content from "./content.md"
2 | import { RawCode, Pre, highlight } from "codehike/code"
3 | import { AnnotationHandler } from "codehike/code"
4 |
5 | export default function Page() {
6 | return {step.children}
13 |
20 |
21 | {isOpen &&
23 | )
24 | }
25 | ```
26 |
27 | It also works if you selecte a word from a paragraph, try: button or `Carousel`.
28 |
--------------------------------------------------------------------------------
/packages/codehike/tests/md-suite/regex-range.0.render.tsx:
--------------------------------------------------------------------------------
1 | import { MDXContent } from "mdx/types"
2 | import {
3 | AnnotationHandler,
4 | highlight,
5 | InnerToken,
6 | Pre,
7 | RawCode,
8 | } from "../../src/code"
9 | import React from "react"
10 |
11 | export function render(Content: MDXContent) {
12 | // @ts-ignore
13 | return {children}
,
24 | Token: ({ annotation, ...props }) => (
25 |
26 | {children}
,
24 | Line: ({ annotation, ...props }) => (
25 |
26 |
28 | ),
29 | }
30 |
--------------------------------------------------------------------------------
/apps/web/app/landing/profile.md:
--------------------------------------------------------------------------------
1 | I ([@pomber](https://github.com/pomber)) am working full-time on this project. The official reason is that _I want to raise the bar on the formatting of technical content_, but the main reason is that I'm having a lot of fun building it.
2 |
3 | The goal of [Code Hike](https://codehike.org) is to provide the best experience for both authors and consumers of technical content on the web.
4 |
5 | Your sponsorship not only helps keep the project running but also supports the innovation that inspired some of your favorite websites.
6 |
7 | Sponsorship perks:
8 |
9 | - **$299/month or more**: I'll join your company's Slack channel for direct feedbacks and feature requests.
10 | - **$499/month or more**: You get a spot on our Top Sponsors (limited to 6 spots).
11 | - **$999/month or more**: You get up to 1 hour a month of personalized support (two 30-minute calls).
12 |
--------------------------------------------------------------------------------
/packages/codehike/tests/md-suite/basic.7.compiled-js.js:
--------------------------------------------------------------------------------
1 | import { jsx as _jsx } from "react/jsx-runtime"
2 | function _createMdxContent(props) {
3 | const _components = {
4 | h1: "h1",
5 | slot: "slot",
6 | ...props.components,
7 | }
8 | const _blocks = {
9 | children: _jsx(_components.h1, {
10 | children: "Lorem",
11 | }),
12 | title: "",
13 | _data: {
14 | header: "",
15 | },
16 | hello: "world",
17 | }
18 | if (props._returnBlocks) {
19 | return _blocks
20 | }
21 | return _blocks.children
22 | }
23 | export default function MDXContent(props = {}) {
24 | const { wrapper: MDXLayout } = props.components || {}
25 | return MDXLayout
26 | ? _jsx(MDXLayout, {
27 | ...props,
28 | children: _jsx(_createMdxContent, {
29 | ...props,
30 | }),
31 | })
32 | : _createMdxContent(props)
33 | }
34 |
--------------------------------------------------------------------------------
/packages/codehike/tests/md-suite/basic.7.compiled-function.jsx:
--------------------------------------------------------------------------------
1 | /*@jsxRuntime automatic @jsxImportSource react*/
2 | "use strict"
3 | function _createMdxContent(props) {
4 | const _components = {
5 | h1: "h1",
6 | slot: "slot",
7 | ...props.components,
8 | }
9 | const _blocks = {
10 | children: <_components.h1>{"Lorem"},
11 | title: "",
12 | _data: {
13 | header: "",
14 | },
15 | hello: "world",
16 | }
17 | if (props._returnBlocks) {
18 | return _blocks
19 | }
20 | return _blocks.children
21 | }
22 | function MDXContent(props = {}) {
23 | const { wrapper: MDXLayout } = props.components || {}
24 | return MDXLayout ? (
25 | {children}
,
25 | Token: ({ annotation, ...props }) => (
26 |
27 |
2 |
29 |
--------------------------------------------------------------------------------
/apps/web/app/source.ts:
--------------------------------------------------------------------------------
1 | import { map } from "@/.map"
2 | import { createMDXSource, defaultSchemas } from "next-docs-mdx"
3 | import { loader } from "next-docs-zeta/source"
4 | import { z } from "zod"
5 |
6 | export const docs = loader({
7 | baseUrl: "/docs",
8 | rootDir: "docs",
9 | source: createMDXSource(map, {
10 | schema: {
11 | frontmatter: defaultSchemas.frontmatter.extend({
12 | layout: z.string().default("Docs"),
13 | }),
14 | },
15 | }),
16 | })
17 |
18 | export const blog = loader({
19 | baseUrl: "/blog",
20 | rootDir: "blog",
21 | source: createMDXSource(map, {
22 | schema: {
23 | frontmatter: defaultSchemas.frontmatter.extend({
24 | authors: z.array(z.string()).default([]),
25 | date: z.date().default(new Date()),
26 | draft: z.boolean().default(false),
27 | className: z.string().default(""),
28 | }),
29 | },
30 | }),
31 | })
32 |
--------------------------------------------------------------------------------
/apps/web/demos/transpile/page.tsx:
--------------------------------------------------------------------------------
1 | import { RawCode } from "codehike/code"
2 |
3 | import Content from "./content.md"
4 | import ts from "typescript"
5 | import { CodeTabs } from "../tabs/page"
6 |
7 | export default function Page() {
8 | return
3 |
10 |
4 | const
5 | a
6 | =
7 | 1
8 |
9 |
11 |
18 |
12 | const
13 | b
14 | =
15 | 2
16 |
17 |
19 |
28 |
20 |
27 |
21 | const
22 | c
23 | =
24 | 3
25 |
26 |
25 |
27 | )
28 | },
29 | }
30 |
--------------------------------------------------------------------------------
/packages/codehike/tests/md-suite/basic.5.before-recma-compiled-jsx.jsx:
--------------------------------------------------------------------------------
1 | /*@jsxRuntime automatic @jsxImportSource react*/
2 | function _createMdxContent(props) {
3 | const _components = {
4 | h1: "h1",
5 | slot: "slot",
6 | ...props.components,
7 | }
8 | return (
9 | <_components.slot
10 | __hike={{
11 | children: "",
12 | title: "",
13 | _data: {
14 | header: "",
15 | },
16 | hello: "world",
17 | }}
18 | >
19 | <_components.slot path="">
20 | <_components.h1>{"Lorem"}
21 |
22 |
23 | )
24 | }
25 | export default function MDXContent(props = {}) {
26 | const { wrapper: MDXLayout } = props.components || {}
27 | return MDXLayout ? (
28 | {children}
23 | ),
24 | }
25 |
26 | const bgHandler: AnnotationHandler = {
27 | name: "bg",
28 | Inline: ({ annotation, children }) => (
29 | {children}
30 | ),
31 | }
32 |
--------------------------------------------------------------------------------
/packages/codehike/tests/md-suite/code.7.compiled-jsx.jsx:
--------------------------------------------------------------------------------
1 | /*@jsxRuntime automatic @jsxImportSource react*/
2 | function _createMdxContent(props) {
3 | const { MyCode } = props.components || {}
4 | if (!MyCode) _missingMdxReference("MyCode", true)
5 | return (
6 |
3 | if
4 | (
5 | true
6 | )
7 |
8 |
9 | return
10 | 3
11 |
12 |
16 | if
17 | True
18 | :
19 |
20 |
21 | return
22 | 1
23 |
24 |
25 | return
26 | 2
27 |
28 |
14 | {/* render it as you want: */}
15 |
18 | )
19 | }
20 | ```
21 |
22 | ```jsx !content
23 | content = {
24 | // !block(1:4) 1
25 | intro: {
26 | title: "Roman Emperors",
27 | children: The ...
, 28 | }, 29 | emperors: [ 30 | // !block(1:9) 2 31 | { 32 | title: "Augustus", 33 | children:The ...
, 34 | img: { src: "/one.png" }, 35 | code: { 36 | lang: "js", 37 | value: "console.log(1)", 38 | }, 39 | }, 40 | // !block 3 41 | { title: "Nero", ... }, 42 | // !block 4 43 | { title: "Trajan", ... }, 44 | ], 45 | } 46 | ``` 47 | -------------------------------------------------------------------------------- /apps/web/demos/token-transitions/code.tsx: -------------------------------------------------------------------------------- 1 | "use client" 2 | 3 | import React from "react" 4 | import { HighlightedCode } from "codehike/code" 5 | import { Pre } from "codehike/code" 6 | import { tokenTransitions } from "@/components/annotations/token-transitions" 7 | 8 | export function CodeSwitcher({ infos }: { infos: HighlightedCode[] }) { 9 | const [index, setIndex] = React.useState(0) 10 | const next = () => setIndex((index + 1) % infos.length) 11 | 12 | return ( 13 | <> 14 |
16 |
19 |
20 |
21 | )
22 | }
23 |
24 | export function CodeClient(props: { highlighted: HighlightedCode }) {
25 | const { highlighted } = props
26 | return (
27 |
32 | )
33 | }
34 |
--------------------------------------------------------------------------------
/apps/web/content/blog/codeblocks.mdx:
--------------------------------------------------------------------------------
1 | ---
2 | title: Perfect codeblocks
3 | description: All the small details that make flawless codeblocks.
4 | date: 2024-01-02
5 | authors: [pomber]
6 | draft: true
7 | ---
8 |
9 | Lorem ipsum
10 |
11 | ```js
12 | const a = 1
13 |
14 | // !Collapse(1:3) collapsed
15 | function foo() {
16 | let b = 2
17 | return a + b
18 | }
19 |
20 | // !Collapse(1:3)
21 | function bar() {
22 | let b = 2
23 | return a + b
24 | }
25 |
26 | console.log(foo())
27 | ```
28 |
29 | Lorem ipsum
30 |
31 | Lorem ipsum
32 |
33 | Lorem ipsum
34 |
35 | Lorem ipsum
36 |
37 | Lorem ipsum
38 |
39 | Lorem ipsum
40 |
41 | Lorem ipsum
42 |
43 | Lorem ipsum
44 |
45 | Lorem ipsum
46 |
47 | Lorem ipsum
48 |
49 | Lorem ipsum
50 |
51 | Lorem ipsum
52 |
53 | Lorem ipsum
54 |
55 | Lorem ipsum
56 |
57 | Lorem ipsum
58 |
59 | Lorem ipsum
60 |
61 | Lorem ipsum
62 |
63 | Lorem ipsum
64 |
65 | Lorem ipsum
66 |
67 | Lorem ipsum
68 |
69 | Lorem ipsum
70 |
71 | Lorem ipsum
72 |
73 | Lorem ipsum
74 |
75 | Lorem ipsum
76 |
77 | Lorem ipsum
78 |
79 | Lorem ipsum
80 |
--------------------------------------------------------------------------------
/apps/web/components/annotations/ruler.tsx:
--------------------------------------------------------------------------------
1 | import { AnnotationHandler } from "codehike/code"
2 |
3 | const colors = [
4 | "bg-green-500/20",
5 | "bg-teal-500/20",
6 | "bg-sky-500/20",
7 | "bg-violet-500/20",
8 | "bg-fuchsia-500/20",
9 | "bg-pink-500/20",
10 | // if adding more colors, dont forget to update global.css
11 | ]
12 |
13 | // needs ruler-group class in container
14 |
15 | export const ruler: AnnotationHandler = {
16 | name: "ruler",
17 | Block: ({ annotation, children }) => {
18 | const [k, c] = annotation.query?.split(" ")
19 | const n = Number(k || "1") % colors.length
20 | const bg = colors[n]
21 | return (
22 |
23 |
27 |
30 |
32 | )
33 | },
34 | }
35 |
--------------------------------------------------------------------------------
/packages/codehike/tests/md-suite/empty-children-and-import.7.compiled-jsx.jsx:
--------------------------------------------------------------------------------
1 | /*@jsxRuntime automatic @jsxImportSource react*/
2 | import { x } from "@/components/code/code-with-notes"
3 | function _createMdxContent(props) {
4 | const _components = {
5 | p: "p",
6 | slot: "slot",
7 | ...props.components,
8 | }
9 | const _blocks = {
10 | children: undefined,
11 | title: "",
12 | _data: {
13 | header: "",
14 | },
15 | demo: {
16 | children: (
17 | <_components.p>{"Add callouts inside your code blocks."}
18 | ),
19 | title: "",
20 | _data: {
21 | header: "## !demo",
22 | },
23 | },
24 | }
25 | if (props._returnBlocks) {
26 | return _blocks
27 | }
28 | return _blocks.children
29 | }
30 | export default function MDXContent(props = {}) {
31 | const { wrapper: MDXLayout } = props.components || {}
32 | return MDXLayout ? (
33 | {children}
31 |
24 |
30 | )
31 | })
32 | }
33 |
--------------------------------------------------------------------------------
/apps/web/demos/annotations/query/page.tsx:
--------------------------------------------------------------------------------
1 | import Content from "./content.md"
2 | import { RawCode, Pre, highlight } from "codehike/code"
3 | import { AnnotationHandler } from "codehike/code"
4 |
5 | export default function Page() {
6 | return {title}
25 | {demo.children} 26 |27 | See {title} implementation. 28 |
29 |{children}
24 | },
25 | }
26 |
27 | const bgHandler: AnnotationHandler = {
28 | name: "bg",
29 | Inline: ({ annotation, children }) => {
30 | const background = annotation.query || "#2d26"
31 | return {children}
32 | },
33 | }
34 |
--------------------------------------------------------------------------------
/apps/web/content/docs/code/classname.mdx:
--------------------------------------------------------------------------------
1 | ---
2 | title: ClassName
3 | description: Add a class name to a piece of code
4 | layout: PreviewAndImplementation
5 | ---
6 |
7 | ## !demo
8 |
9 | Add a class name to a piece of code.
10 |
11 | {children}
22 | ),
23 | Inline: ({ annotation, children }) => (
24 | {children}
25 | ),
26 | }
27 | ```
28 |
29 | And then add the handler to your `Code` component:
30 |
31 | ```tsx code.tsx -c
32 | import { RawCode, Pre, highlight } from "codehike/code"
33 | import { className } from "./classname"
34 |
35 | async function Code({ codeblock }: { codeblock: RawCode }) {
36 | const highlighted = await highlight(codeblock, "github-dark")
37 | return
38 | }
39 | ```
40 |
--------------------------------------------------------------------------------
/apps/web/demos/line-numbers/page.tsx:
--------------------------------------------------------------------------------
1 | import {
2 | RawCode,
3 | Pre,
4 | highlight,
5 | AnnotationHandler,
6 | InnerLine,
7 | } from "codehike/code"
8 | import Content from "./content.md"
9 |
10 | export default function Page() {
11 | return
32 |
36 | {props.lineNumber}
37 |
38 |
40 | )
41 | },
42 | }
43 |
--------------------------------------------------------------------------------
/apps/web/app/blog/feed.xml/route.ts:
--------------------------------------------------------------------------------
1 | import RSS from "rss"
2 | import { blog } from "../../source"
3 |
4 | const posts = blog.getPages().filter((page) => page.data.draft !== true)
5 |
6 | export const dynamic = "force-static"
7 |
8 | export async function GET() {
9 | const feed = new RSS({
10 | title: "Code Hike",
11 | description: "Markdown, React and everything in between.",
12 | generator: "RSS for Node and Next.js",
13 | feed_url: "https://codehike.org/blog/feed.xml",
14 | site_url: "https://codehike.org/blog",
15 | language: "en-US",
16 | pubDate: new Date().toUTCString(),
17 | ttl: 120,
18 | image_url: "https://codehike.org/logo.png",
19 | })
20 |
21 | posts.map(({ data, url }) => {
22 | feed.item({
23 | title: data.title,
24 | description: data.description || "",
25 | url: `https://codehike.org${url}`,
26 | author: data.authors[0],
27 | date: data.date,
28 | })
29 | })
30 |
31 | return new Response(feed.xml({ indent: true }), {
32 | headers: {
33 | "Content-Type": "application/atom+xml; charset=utf-8",
34 | },
35 | })
36 | }
37 |
--------------------------------------------------------------------------------
/.github/workflows/pr-merged.yml:
--------------------------------------------------------------------------------
1 | name: PR Merged
2 |
3 | on:
4 | pull_request_target:
5 | types: [closed]
6 | branches:
7 | - next
8 |
9 | jobs:
10 | comment-issues:
11 | name: Comment Issues
12 | if: >
13 | github.event.pull_request.merged == true && contains(github.event.pull_request.labels.*.name, 'changeset')
14 |
15 | runs-on: ubuntu-latest
16 |
17 | permissions:
18 | issues: write
19 | pull-requests: write
20 |
21 | steps:
22 | - name: Checkout code
23 | uses: actions/checkout@v4
24 | with:
25 | ref: "${{ github.event.pull_request.merge_commit_sha }}"
26 |
27 | - name: Install pnpm
28 | uses: pnpm/action-setup@v4
29 | with:
30 | run_install: false
31 |
32 | - name: Set up Node.js
33 | uses: actions/setup-node@v4
34 | with:
35 | node-version: 20
36 | cache: "pnpm"
37 |
38 | - run: pnpm install
39 |
40 | - name: Add comment to issues
41 | run: node .github/scripts/pr-merged.mjs
42 | env:
43 | GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
44 |
--------------------------------------------------------------------------------
/apps/web/demos/slideshow/controls.tsx:
--------------------------------------------------------------------------------
1 | "use client"
2 | import { useSelectedIndex } from "codehike/utils/selection"
3 |
4 | export function Controls({ length }: { length: number }) {
5 | const [selectedIndex, setSelectedIndex] =
6 | useSelectedIndex()
7 |
8 | return (
9 |
10 |
18 | {[...Array(length)].map((_, i) => (
19 |
38 | )
39 | }
40 |
--------------------------------------------------------------------------------
/license:
--------------------------------------------------------------------------------
1 | MIT License
2 |
3 | Copyright (c) 2020 Code Hike
4 |
5 | Permission is hereby granted, free of charge, to any person obtaining a copy
6 | of this software and associated documentation files (the "Software"), to deal
7 | in the Software without restriction, including without limitation the rights
8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
9 | copies of the Software, and to permit persons to whom the Software is
10 | furnished to do so, subject to the following conditions:
11 |
12 | The above copyright notice and this permission notice shall be included in all
13 | copies or substantial portions of the Software.
14 |
15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
21 | SOFTWARE.
22 |
--------------------------------------------------------------------------------
/packages/codehike/tests/md-suite/_readme.md:
--------------------------------------------------------------------------------
1 | # MD Test Suite
2 |
3 | All the `*.0.mdx` files in this directory are tests
4 |
5 | Add the snapshots you are interested in testing to the `snapshots` array in the frontmatter of the mdx file:
6 |
7 | ```md
8 | ---
9 | syntaxHighlight: github-light
10 | snapshots:
11 | - before-remark
12 | - after-remark
13 | - after-rehype
14 | - before-recma-compiled-js
15 | - before-recma-compiled-jsx
16 | - before-recma-compiled-function
17 | - before-recma-js
18 | - before-recma-js-dev
19 | - before-recma-jsx
20 | - after-recma-js
21 | - after-recma-js-dev
22 | - after-recma-jsx
23 | - compiled-js
24 | - compiled-js-dev
25 | - compiled-jsx
26 | - compiled-function
27 | - parsed-jsx
28 | - rendered
29 | - rendered-dev
30 | ---
31 | ```
32 |
33 | ## Errors
34 |
35 | If there are errors in the test, it will be snapshoted in the `testname.1.error.md` file
36 |
37 | ## Running only one test:
38 |
39 | filter by test name: `pnpm watch -t foo` and then `r` to rerun the current test
40 |
41 | ## TODO
42 |
43 | - rerun tests when md file changes
44 | - remove carriage returns from snapshots
45 |
--------------------------------------------------------------------------------
/.github/workflows/release-pr-merged.yml:
--------------------------------------------------------------------------------
1 | name: Release PR Merged
2 |
3 | on:
4 | pull_request:
5 | types: [closed]
6 | branches:
7 | - next
8 |
9 | jobs:
10 | release:
11 | name: Release
12 | if: >
13 | github.event.pull_request.merged == true && contains(github.event.pull_request.labels.*.name, 'release')
14 |
15 | runs-on: ubuntu-latest
16 |
17 | permissions:
18 | issues: write
19 | pull-requests: write
20 | contents: write
21 |
22 | steps:
23 | - name: Checkout code
24 | uses: actions/checkout@v4
25 |
26 | - name: Install pnpm
27 | uses: pnpm/action-setup@v4
28 | with:
29 | run_install: false
30 |
31 | - name: Set up Node.js
32 | uses: actions/setup-node@v4
33 | with:
34 | node-version: 20
35 | cache: "pnpm"
36 |
37 | - run: pnpm install
38 |
39 | - run: pnpm build
40 |
41 | - name: Release and update issues comments
42 | run: node .github/scripts/release.mjs
43 | env:
44 | NPM_TOKEN: ${{ secrets.NPM_TOKEN }}
45 | GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
46 |
--------------------------------------------------------------------------------
/packages/codehike/src/mdx.ts:
--------------------------------------------------------------------------------
1 | import { Plugin } from "unified"
2 | // this adds the jsx node types to Root
3 | import "mdast-util-mdx-jsx"
4 | import { Root } from "mdast"
5 |
6 | import { transformImportedCode } from "./mdx/0.import-code-from-path.js"
7 | import { transformAllHikes } from "./mdx/1.0.transform-hikes.js"
8 | import { transformAllCode } from "./mdx/2.transform-code.js"
9 | import { transformHikeProps } from "./mdx/3.transform-hike-props.js"
10 | import { CodeHikeConfig } from "./mdx/config.js"
11 |
12 | export type { CodeHikeConfig }
13 |
14 | export const remarkCodeHike: Plugin<[CodeHikeConfig?], Root, Root> = (
15 | config,
16 | ) => {
17 | const safeConfig = config || {}
18 | return async (root, file) => {
19 | let tree = await transformImportedCode(root, file)
20 | tree = await transformAllHikes(tree, safeConfig)
21 | tree = await transformAllCode(tree, safeConfig)
22 | return tree
23 | }
24 | }
25 |
26 | export const recmaCodeHike: Plugin<[CodeHikeConfig?], Root, Root> = (
27 | config,
28 | ) => {
29 | return async (root) => {
30 | let tree = transformHikeProps(root) as any
31 | return tree as any
32 | }
33 | }
34 |
--------------------------------------------------------------------------------
/apps/web/app/demo/content.mdx:
--------------------------------------------------------------------------------
1 | normal, extra spacer right
2 |
3 | ```js
4 | function lorem(ipsum, dolor = 1) {
5 | // !mark
6 | dolor = sit - amet(dolor)
7 | dolor = sit - amet(dolor)
8 | dolor = sit - amet(dolor)
9 | dolor = sit - amet(dolor)
10 | // !mark
11 | dolor = sit - amet(dolor)
12 | dolor = sit - amet(dolor)
13 | // !diff +
14 | dolor = sit - amet(dolor)
15 | dolor = sit - amet(dolor)
16 | dolor = sit - amet(dolor)
17 | dolor = sit - amet(dolor)
18 | // !collapse(1:3)
19 | dolor = sit - amet(dolor)
20 | // !callout[/sit/] hey
21 | dolor = sit - amet(dolor)
22 | dolor = sit - amet(dolor)
23 | }
24 | ```
25 |
26 |
27 |
28 | overflow
29 |
30 | ```js
31 | function lorem(ipsum, dolor = 1) {
32 | // !mark
33 | dolor = sit
34 | }
35 | ```
36 |
37 |
38 |
39 |
40 |
41 | wrap
42 |
43 | ```js w
44 | // !callout[/lorem/] hey
45 | function lorem(ipsum) {
46 | // !mark
47 | dolor = sit - amet(dolor) - consectetur(ipsum)
48 | // !callout[/dolor/] hey
49 | if (dolor === 1) {
50 | // !callout[/sit/] hey
51 | dolor = sit
52 | }
53 | }
54 | ```
55 |
56 |
57 |
--------------------------------------------------------------------------------
/packages/codehike/tests/md-suite/stacked-token.9.rendered.html:
--------------------------------------------------------------------------------
1 |
2 |
29 |
--------------------------------------------------------------------------------
/packages/codehike/src/code.tsx:
--------------------------------------------------------------------------------
1 | import type {
2 | Token,
3 | RawCode,
4 | HighlightedCode,
5 | CodeAnnotation,
6 | Theme,
7 | InlineAnnotation,
8 | BlockAnnotation,
9 | InlineAnnotationComponent,
10 | BlockAnnotationComponent,
11 | AnnotationHandler,
12 | CustomPreProps,
13 | CustomPre,
14 | CustomLine,
15 | CustomLineWithAnnotation,
16 | CustomToken,
17 | CustomTokenWithAnnotation,
18 | InlineProps,
19 | } from "./code/types.js"
20 |
21 | import { highlight } from "./code/highlight.js"
22 | import { Pre, Inline } from "./code/pre.js"
23 | import { InnerPre, getPreRef, InnerLine, InnerToken } from "./code/inner.js"
24 |
25 | export type {
26 | RawCode,
27 | HighlightedCode,
28 | Token,
29 | InlineAnnotation,
30 | BlockAnnotation,
31 | CodeAnnotation,
32 | // AnnotationHandler:
33 | AnnotationHandler,
34 | InlineProps,
35 | CustomPre,
36 | CustomPreProps,
37 | BlockAnnotationComponent,
38 | CustomLine,
39 | CustomLineWithAnnotation,
40 | InlineAnnotationComponent,
41 | CustomToken,
42 | CustomTokenWithAnnotation,
43 | Theme,
44 | }
45 |
46 | export { highlight, Pre, InnerPre, InnerLine, InnerToken, getPreRef, Inline }
47 |
--------------------------------------------------------------------------------
/.github/workflows/pr-updated.yml:
--------------------------------------------------------------------------------
1 | name: PR Updated
2 |
3 | on:
4 | pull_request_target:
5 | branches:
6 | - next
7 |
8 | concurrency:
9 | group: ${{ github.workflow }}-${{ github.event.pull_request.number }}
10 | cancel-in-progress: true
11 |
12 | jobs:
13 | comment-pr:
14 | name: Comment PR
15 | runs-on: ubuntu-latest
16 |
17 | permissions:
18 | issues: write
19 | pull-requests: write
20 |
21 | steps:
22 | - name: Checkout code
23 | uses: actions/checkout@v4
24 | with:
25 | ref: "${{ github.event.pull_request.head.sha }}"
26 |
27 | - name: Install pnpm
28 | uses: pnpm/action-setup@v4
29 | with:
30 | run_install: false
31 |
32 | - name: Set up Node.js
33 | uses: actions/setup-node@v4
34 | with:
35 | node-version: 20
36 | cache: "pnpm"
37 |
38 | - run: pnpm install
39 |
40 | - run: pnpm build
41 |
42 | - run: pnpm canary
43 |
44 | - name: Add or update PR comment
45 | run: node .github/scripts/pr-updated.mjs ${{ github.event.pull_request.number }}
46 | env:
47 | GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
48 |
--------------------------------------------------------------------------------
/apps/web/content/blog/remotion/01.jsx:
--------------------------------------------------------------------------------
1 | import Content from "./content.md"
2 |
3 | // !mark(1:11)
4 | // !focus(1:11)
5 | const Schema = Block.extend({
6 | steps: z.array(
7 | Block.extend({
8 | code: HighlightedCodeBlock,
9 | }),
10 | ),
11 | })
12 | const { steps } = parseRoot(
13 | Content,
14 | Schema,
15 | )
16 |
17 | const STEP_FRAMES = 60
18 | function Video({ steps }) {
19 | return (
20 |
3 | const
4 | a
5 | =
6 | 1
7 |
8 |
9 | const
10 | b
11 | =
12 | 2
13 |
14 |
15 |
16 | const
17 |
18 |
19 | c
20 |
21 |
22 | =
23 |
24 |
25 | 3
26 |
27 |
28 |
29 |
31 | {title}
19 |{children}
20 |
21 | {blocks.map((example) => (
22 |
29 | 
30 |
34 |
30 | {example.title}
31 | 32 | ))} 33 |
27 |
31 | {props.lineNumber}
32 |
33 |
35 | )
36 | },
37 | }
38 | ```
39 |
40 | Pass it to the `handlers` prop of the `Pre` component:
41 |
42 | ```tsx code.tsx -c
43 | import { lineNumbers } from "./line-numbers"
44 |
45 | async function Code({ codeblock }: { codeblock: RawCode }) {
46 | const highlighted = await highlight(codeblock, "github-dark")
47 | return
48 | }
49 | ```
50 |
--------------------------------------------------------------------------------
/apps/web/components/annotations/mark.tsx:
--------------------------------------------------------------------------------
1 | import { AnnotationHandler, BlockAnnotation, InnerLine } from "codehike/code"
2 |
3 | export const mark: AnnotationHandler = {
4 | name: "mark",
5 | Line: ({ annotation, ...props }) => {
6 | const color = getColor(annotation)
7 | return (
8 |
16 |
18 | )
19 | },
20 | Inline: ({ annotation, children }) => {
21 | const color = getColor(annotation)
22 | return (
23 |
30 | {children}
31 |
32 | )
33 | },
34 | }
35 |
36 | function getColor(annotation?: { query?: string }) {
37 | const n = Number(annotation?.query || "2") % colors.length
38 | return colors[n] || annotation?.query
39 | }
40 |
41 | const colors = [
42 | "#22c55e",
43 | "#14b8a6",
44 | "#0ea5e9",
45 | "#8b5cf6",
46 | "#d946ef",
47 | "#ec4899",
48 | ]
49 |
--------------------------------------------------------------------------------
/apps/web/demos/tabs/page.tsx:
--------------------------------------------------------------------------------
1 | import { Pre, RawCode, highlight } from "codehike/code"
2 | import Content from "./content.mdx"
3 | import { Block, CodeBlock, parseProps } from "codehike/blocks"
4 | import { z } from "zod"
5 | import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs"
6 |
7 | export default async function Page() {
8 | return
31 | step.children)}
33 | />
34 |
35 |
33 |
39 |
40 |
37 |
44 | )
45 |
46 | return (
47 |
40 | {children}
41 |
42 | )}
43 | *]:flex-1 [&>*]:min-w-72",
50 | className,
51 | )}
52 | >
53 |
56 | )
57 | }
58 |
--------------------------------------------------------------------------------
/packages/codehike/tests/md-suite/nested-blocks.8.parsed-jsx.jsx:
--------------------------------------------------------------------------------
1 | var block = {
2 | "_data": {
3 | "header": "",
4 | },
5 | "children": {usage}
54 | {preview}
55 | 7 | hello 8 |
9 |10 | hey 11 |
12 |19 | 1 20 |
21 |22 | ho 23 |
24 |30 | extra 31 |
, 32 | "title": "", 33 | }, 34 | "foo": [ 35 | { 36 | "_data": { 37 | "header": "## !!foo 111", 38 | }, 39 | "bar": { 40 | "_data": { 41 | "header": "### !bar b", 42 | }, 43 | "children":44 | 1.1.1 45 |
, 46 | "title": "b", 47 | }, 48 | "children":50 | 1.1 51 |
52 |53 | more 54 |
55 |63 | hey 64 |
, 65 | "title": "222", 66 | }, 67 | ], 68 | "title": "uno", 69 | }, 70 | "title": "", 71 | } -------------------------------------------------------------------------------- /packages/codehike/tests/md-suite/ignore-codeblock.7.compiled-jsx.jsx: -------------------------------------------------------------------------------- 1 | /*@jsxRuntime automatic @jsxImportSource react*/ 2 | function _createMdxContent(props) { 3 | const _components = { 4 | code: "code", 5 | p: "p", 6 | pre: "pre", 7 | ...props.components, 8 | }, 9 | { MyCode } = _components 10 | if (!MyCode) _missingMdxReference("MyCode", true) 11 | return ( 12 | <> 13 | <_components.p>{"hey"} 14 | {"\n"} 15 | <_components.pre> 16 | <_components.code className="language-mermaid"> 17 | { 18 | "graph TD;\r\n A-->B;\r\n A-->C;\r\n B-->D;\r\n C-->D;\n" 19 | } 20 | 21 | 22 | {"\n"} 23 |
20 | {props.children}
21 |
22 | )
23 | }
24 |
25 | function Link(props: { href?: string; children?: React.ReactNode }) {
26 | if (props.href?.startsWith("hover:")) {
27 | const hover = props.href.slice("hover:".length)
28 | return (
29 |
33 | {props.children}
34 |
35 | )
36 | } else {
37 | return
38 | }
39 | }
40 |
41 | async function Code({ codeblock }: { codeblock: RawCode }) {
42 | const highlighted = await highlight(codeblock, "github-dark")
43 | return
44 | }
45 |
46 | const hover: AnnotationHandler = {
47 | name: "hover",
48 | onlyIfAnnotated: true,
49 | Line: ({ annotation, ...props }) => (
50 |
52 | {children}
53 |
54 | )
55 | },
56 | }
57 |
58 | export function RemotionRoot() {
59 | return (
60 |
27 |
29 | )
30 | },
31 | Inline: ({ annotation, children }) => {
32 | const color = annotation?.query || "rgb(14 165 233)"
33 | return (
34 |
41 | {children}
42 |
43 | )
44 | },
45 | }
46 |
47 | async function Code({ codeblock }: { codeblock: RawCode }) {
48 | const highlighted = await highlight(codeblock, "github-dark")
49 | return (
50 |
55 | )
56 | }
57 |
--------------------------------------------------------------------------------
/apps/web/demos/language-switcher/multi-code.tsx:
--------------------------------------------------------------------------------
1 | "use client"
2 |
3 | import { HighlightedCode, Pre, RawCode, highlight } from "codehike/code"
4 |
5 | import { useState } from "react"
6 | import {
7 | Select,
8 | SelectContent,
9 | SelectItem,
10 | SelectTrigger,
11 | SelectValue,
12 | } from "@/components/ui/select"
13 | import { tokenTransitions } from "@/components/annotations/token-transitions"
14 |
15 | export function Code({ highlighted }: { highlighted: HighlightedCode[] }) {
16 | const [selectedLang, setSelectedLang] = useState(highlighted[0].lang)
17 | const selectedCode = highlighted.find((code) => code.lang === selectedLang)!
18 |
19 | return (
20 |
21 |
26 |
45 | )
46 | }
47 |
--------------------------------------------------------------------------------
/apps/web/content/docs/code/diff.mdx:
--------------------------------------------------------------------------------
1 | ---
2 | title: Diff
3 | description: Diff
4 | layout: PreviewAndImplementation
5 | ---
6 |
7 | ## !demo
8 |
9 | Show inserted and deleted lines.
10 |
11 |
27 |
43 |
44 |
34 | {annotation?.query}
35 |
36 |
36 | {props.children}
37 |
38 |
55 |
58 | )
59 | }
60 | ```
61 |
--------------------------------------------------------------------------------
/apps/web/components/annotations/token-transitions.client.tsx:
--------------------------------------------------------------------------------
1 | "use client"
2 |
3 | import { CustomPreProps, InnerPre, getPreRef } from "codehike/code"
4 | import {
5 | TokenTransitionsSnapshot,
6 | calculateTransitions,
7 | getStartingSnapshot,
8 | } from "codehike/utils/token-transitions"
9 | import React from "react"
10 |
11 | const MAX_TRANSITION_DURATION = 900 // milliseconds
12 | export class PreWithRef extends React.Component
31 |
39 | {[...Array(length)].map((_, i) => (
40 |
59 | )
60 | }
61 |
--------------------------------------------------------------------------------
/apps/web/ui/tabs-toggle.tsx:
--------------------------------------------------------------------------------
1 | "use client"
2 | import { ToggleGroup, ToggleGroupItem } from "./toggle-group"
3 |
4 | import React from "react"
5 |
6 | const TabsContext = React.createContext{children}
17 | {option.content}
53 | }
54 |
--------------------------------------------------------------------------------
/apps/web/app/test/content.md:
--------------------------------------------------------------------------------
1 | ## The mother of all codeblocks
2 |
3 | ```js foo.js -awnc
4 | // !collapse(1:4)
5 | function lorem(ipsum, dolor = 1) {
6 | const sit = ipsum == null ? 0 : ipsum.sit
7 | // !mark(1:2)
8 | dolor = sit - amet(dolor)
9 | // !callout[/sit/] lorem ipsum dolor sit
10 | return sit ? consectetur(ipsum) : []
11 | }
12 |
13 | // !collapse(1:4) collapsed
14 | function ipsum(ipsum, dolor = 1) {
15 | const sit = ipsum == null ? 0 : ipsum.sit
16 | // !mark(1:2)
17 | dolor = sit - amet(dolor)
18 | return sit ? consectetur(ipsum) : []
19 | }
20 | ```
21 |
22 | ```js foo.js -anc
23 | // !collapse(1:4)
24 | function lorem(ipsum, dolor = 1) {
25 | const sit = ipsum == null ? 0 : ipsum.sit
26 | // !mark(1:2)
27 | dolor = sit - amet(dolor)
28 | // !callout[/sit/] lorem ipsum dolor sit
29 | return sit ? consectetur(ipsum) : []
30 | }
31 |
32 | // !collapse(1:4) collapsed
33 | function ipsum(ipsum, dolor = 1) {
34 | const sit = ipsum == null ? 0 : ipsum.sit
35 | // !mark(1:2)
36 | dolor = sit - amet(dolor)
37 | return sit ? consectetur(ipsum) : []
38 | }
39 | ```
40 |
41 | ```js -c
42 | function lorem(ipsum, dolor = 1) {
43 | const sit = ipsum == null ? 0 : ipsum.sit
44 | // !mark(1:2)
45 | dolor = sit - amet(dolor)
46 | // !callout[/sit/] lorem ipsum dolor sit
47 | return sit ? consectetur(ipsum) : []
48 | }
49 |
50 | function ipsum(ipsum, dolor = 1) {
51 | const sit = ipsum == null ? 0 : ipsum.sit
52 | // !mark(1:2)
53 | dolor = sit - amet(dolor)
54 | return sit ? consectetur(ipsum) : []
55 | }
56 | ```
57 |
58 | ```bash -c
59 | npx create-next-app -e https://github.com/code-hike/v1-starter
60 | ```
61 |
--------------------------------------------------------------------------------
/.github/scripts/md-utils.mjs:
--------------------------------------------------------------------------------
1 | import { unified } from "unified"
2 | import remarkParse from "remark-parse"
3 | import remarkStringify from "remark-stringify"
4 | import * as mdastToString from "mdast-util-to-string"
5 |
6 | const BumpLevels = {
7 | dep: 0,
8 | patch: 1,
9 | minor: 2,
10 | major: 3,
11 | }
12 |
13 | export function getChangelogEntry(changelog, version) {
14 | let ast = unified().use(remarkParse).parse(changelog)
15 |
16 | let highestLevel = BumpLevels.dep
17 |
18 | let nodes = ast.children
19 | let headingStartInfo
20 | let endIndex
21 |
22 | for (let i = 0; i < nodes.length; i++) {
23 | let node = nodes[i]
24 | if (node.type === "heading") {
25 | let stringified = mdastToString.toString(node)
26 | let match = stringified.toLowerCase().match(/(major|minor|patch)/)
27 | if (match !== null) {
28 | let level = BumpLevels[match[0]]
29 | highestLevel = Math.max(level, highestLevel)
30 | }
31 | if (headingStartInfo === undefined && stringified === version) {
32 | headingStartInfo = {
33 | index: i,
34 | depth: node.depth,
35 | }
36 | continue
37 | }
38 | if (
39 | endIndex === undefined &&
40 | headingStartInfo !== undefined &&
41 | headingStartInfo.depth === node.depth
42 | ) {
43 | endIndex = i
44 | break
45 | }
46 | }
47 | }
48 | if (headingStartInfo) {
49 | ast.children = ast.children.slice(headingStartInfo.index + 1, endIndex)
50 | }
51 | return {
52 | content: unified().use(remarkStringify).stringify(ast),
53 | highestLevel: highestLevel,
54 | }
55 | }
56 |
--------------------------------------------------------------------------------
/apps/web/components/annotations/callout.tsx:
--------------------------------------------------------------------------------
1 | import { AnnotationHandler, InlineAnnotation, InnerLine } from "codehike/code"
2 |
3 | export const callout: AnnotationHandler = {
4 | name: "callout",
5 | transform: (annotation: InlineAnnotation) => {
6 | // transform inline annotation to block annotation
7 | const { name, query, lineNumber, fromColumn, toColumn } = annotation
8 | return {
9 | name,
10 | query,
11 | fromLineNumber: lineNumber,
12 | toLineNumber: lineNumber,
13 | data: {
14 | ...annotation.data,
15 | column: (fromColumn + toColumn) / 2,
16 | },
17 | }
18 | },
19 | AnnotatedLine: ({ annotation, ...props }) => {
20 | const { column } = annotation.data
21 | const { indentation, children } = props
22 | return (
23 |
32 |
36 | {annotation.data.children || (
37 |
40 | {annotation.query}
38 | )}
39 |
42 |
46 | {annotation.query}
47 |
48 |
49 | )
50 | },
51 | }
52 |
--------------------------------------------------------------------------------
/packages/codehike/src/mdx/1.0.transform-hikes.ts:
--------------------------------------------------------------------------------
1 | import { Root } from "mdast"
2 | import { MdxJsxFlowElement } from "mdast-util-mdx-jsx"
3 | import { visit } from "unist-util-visit"
4 | import { isHikeElement, listToSection } from "./1.1.remark-list-to-section.js"
5 | import { sectionToAttribute } from "./1.2.remark-section-to-attribute.js"
6 | import { CodeHikeConfig } from "./config.js"
7 |
8 | export async function transformAllHikes(root: Root, config: CodeHikeConfig) {
9 | let tree = wrapInHike(root)
10 |
11 | const hikes: MdxJsxFlowElement[] = []
12 |
13 | visit(tree, "mdxJsxFlowElement", (node) => {
14 | if (node.children?.some(isHikeElement)) {
15 | hikes.push(node)
16 | }
17 | })
18 |
19 | await Promise.all(hikes.map((h) => transformRemarkHike(h, config)))
20 |
21 | return tree
22 | }
23 |
24 | function wrapInHike(root: Root) {
25 | // if we find any hikeable element outside of
33 | You can also change the focus annotations on a rendered codeblock:
34 |
35 |
36 | {" "}
43 |
50 |
51 |
52 | )
53 | }
54 |
--------------------------------------------------------------------------------
/apps/web/app/blog/og/page.tsx:
--------------------------------------------------------------------------------
1 | import Image from "next/image"
2 | import { CodeHikeLogo } from "../../../ui/nav"
3 |
4 | const title = "The Curse of Markdown"
5 | const description = "And the content website wasteland"
6 | const date = "November 21, 2024"
7 |
8 | import pomber from "../[slug]/pomber.jpg"
9 |
10 | export default function Page() {
11 | return (
12 |
13 |
45 | )
46 | }
47 |
--------------------------------------------------------------------------------
/apps/web/content/docs/code/transpile.mdx:
--------------------------------------------------------------------------------
1 | ---
2 | title: Transpile
3 | description: Show code together with its transpiled version
4 | layout: PreviewAndImplementation
5 | ---
6 |
7 | ## !demo
8 |
9 | Sometimes you have a code block that you want to show together with its versions in different languages. It may be typescript and javascript, or sass and css, or maybe you want to transform a cURL command into calls to SDKs in different languages.
10 |
11 | If you are using React Server Components and you have a function to transpile the code, you can call that function inside the component.
12 |
13 | Here's an example showing how to transpile a typescript code block to javascript, and then showing both versions in tabs:
14 |
15 |
17 |
27 |
29 |
44 |
18 |
19 |
25 | {title}
26 |
27 | {description}
28 |
29 |
30 |
43 |
39 |
42 | Rodrigo Pombo
40 | @pomber
41 |