Page not found.
10 |11 | For older versions try:{" "} 12 | 13 | {v0url} 14 | 15 |
16 |
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 |
--------------------------------------------------------------------------------
/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/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 | Implementation
23 | {implementation.children} 24 | 25 | ) 26 | } 27 | -------------------------------------------------------------------------------- /apps/web/app/docs/layout.tsx: -------------------------------------------------------------------------------- 1 | import { docs } from "../source" 2 | import { DocsLayout } from "next-docs-ui/layout" 3 | import type { ReactNode } from "react" 4 | export default function RootDocsLayout({ children }: { children: ReactNode }) { 5 | return ( 6 | <> 7 |
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/app/landing/download.tsx: -------------------------------------------------------------------------------- 1 | "use client" 2 | import * as htmlToImage from "html-to-image" 3 | 4 | export function Download({ selector }: { selector: string }) { 5 | const onClick = async () => { 6 | const nodes = document.querySelectorAll(selector) as any 7 | for (const node of nodes) { 8 | const dataUrl = await htmlToImage.toPng(node as HTMLElement) 9 | var img = new Image() 10 | img.src = dataUrl 11 | document.getElementById("out")!.appendChild(img) 12 | } 13 | } 14 | return ( 15 |
16 |
17 |
18 |
19 | )
20 | }
21 |
--------------------------------------------------------------------------------
/apps/web/app/landing/logo.drivly.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/code-hike/codehike/43e599f7bafe2cc32a08dae0bc0c452ea714154f/apps/web/app/landing/logo.drivly.png
--------------------------------------------------------------------------------
/apps/web/app/landing/logo.github.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/code-hike/codehike/43e599f7bafe2cc32a08dae0bc0c452ea714154f/apps/web/app/landing/logo.github.png
--------------------------------------------------------------------------------
/apps/web/app/landing/logo.meta.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/code-hike/codehike/43e599f7bafe2cc32a08dae0bc0c452ea714154f/apps/web/app/landing/logo.meta.png
--------------------------------------------------------------------------------
/apps/web/app/landing/logo.uidev.svg:
--------------------------------------------------------------------------------
1 |
--------------------------------------------------------------------------------
/apps/web/app/landing/placeholdifier-monospace.woff2:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/code-hike/codehike/43e599f7bafe2cc32a08dae0bc0c452ea714154f/apps/web/app/landing/placeholdifier-monospace.woff2
--------------------------------------------------------------------------------
/apps/web/app/landing/placeholdifier.woff2:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/code-hike/codehike/43e599f7bafe2cc32a08dae0bc0c452ea714154f/apps/web/app/landing/placeholdifier.woff2
--------------------------------------------------------------------------------
/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 |
--------------------------------------------------------------------------------
/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 |
--------------------------------------------------------------------------------
/apps/web/app/landing/sponsors/update.js:
--------------------------------------------------------------------------------
1 | const fs = require("fs")
2 | const path = require("path")
3 |
4 | const getOpenCollectiveSponsors = require("./oc-sponsors.js")
5 | const fetchGitHubSponsors = require("./gh-sponsors.js")
6 |
7 | const ignore = ["outerbounds", "github-sponsors", "guest-fbd7c737"]
8 | const replace = {
9 | speakeasybot: "speakeasy-api",
10 | ndimares: "speakeasy-api",
11 | hamelsmu: "outerbounds",
12 | "severin-ibarluzea": "seveibar",
13 | fbopensource: "facebook",
14 | }
15 | const others = [
16 | // from paypal
17 | { name: "matthiaszepper", amount: Math.round(94.3 + 108.71 + 47) },
18 | // missing from gh api
19 | { name: "github", amount: 20550 },
20 | ]
21 |
22 | Promise.all([getOpenCollectiveSponsors(), fetchGitHubSponsors()]).then(
23 | ([ocSponsors, ghSponsors]) => {
24 | const all = [...ocSponsors, ...ghSponsors, ...others]
25 | .filter((s) => !ignore.includes(s.name))
26 | .map((s) => ({ name: replace[s.name] || s.name, amount: s.amount }))
27 |
28 | const sponsors = []
29 | all.forEach((s) => {
30 | const index = sponsors.findIndex((sp) => sp.name === s.name)
31 | if (index === -1) {
32 | sponsors.push(s)
33 | } else {
34 | sponsors[index].amount += s.amount
35 | }
36 | })
37 |
38 | sponsors.sort((a, b) => b.amount - a.amount)
39 |
40 | console.table(sponsors)
41 | fs.writeFileSync(
42 | path.join(__dirname, "../sponsors.json"),
43 | JSON.stringify(sponsors, null, 2),
44 | )
45 | },
46 | )
47 |
--------------------------------------------------------------------------------
/apps/web/app/landing/text.github.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/code-hike/codehike/43e599f7bafe2cc32a08dae0bc0c452ea714154f/apps/web/app/landing/text.github.png
--------------------------------------------------------------------------------
/apps/web/app/layout.tsx:
--------------------------------------------------------------------------------
1 | import "./global.css"
2 | import { RootProvider } from "next-docs-ui/provider"
3 | import { Inter } from "next/font/google"
4 | import type { ReactNode } from "react"
5 | import { NavBar } from "../ui/nav"
6 | import { Analytics } from "@vercel/analytics/react"
7 |
8 | const inter = Inter({
9 | subsets: ["latin"],
10 | })
11 |
12 | import ch from "codehike/package.json"
13 | import { Metadata } from "next"
14 |
15 | export default function Layout({ children }: { children: ReactNode }) {
16 | return (
17 |
22 | {/* */}
23 |
24 |
4 | // TO DO
5 |
6 | )
7 | }
8 |
--------------------------------------------------------------------------------
/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/app/test/client.tsx:
--------------------------------------------------------------------------------
1 | "use client"
2 |
3 | import {
4 | AnnotationHandler,
5 | CustomPreProps,
6 | InnerPre,
7 | getPreRef,
8 | } from "codehike/code"
9 | import { forwardRef } from "react"
10 | import React from "react"
11 | import {
12 | TokenTransitionsSnapshot,
13 | calculateTransitions,
14 | getStartingSnapshot,
15 | } from "codehike/utils/token-transitions"
16 |
17 | const MAX_TRANSITION_DURATION = 900 // milliseconds
18 | export class SmoothPre extends React.Component
8 |
12 | )
13 | }
14 |
--------------------------------------------------------------------------------
/apps/web/app/top-sponsors.png/route.tsx:
--------------------------------------------------------------------------------
1 | import { ImageResponse } from "next/og"
2 |
3 | export const dynamic = "force-static"
4 |
5 | export async function GET(request: Request) {
6 | return new ImageResponse(
7 | (
8 | {new Date().toString()}
9 |
9 | hello, world
10 | 
11 |
12 | ),
13 | {
14 | width: 600,
15 | height: 400,
16 | },
17 | )
18 | }
19 |
--------------------------------------------------------------------------------
/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/components/all-code-demos.tsx:
--------------------------------------------------------------------------------
1 | import { docs } from "@/app/source"
2 | import { Block, parseRoot } from "codehike/blocks"
3 | import { Demo } from "@/components/demo"
4 | import { CodeWithNotes } from "@/components/code/code-with-notes"
5 | import Link from "next/link"
6 |
7 | export function AllCodeDemos() {
8 | const p = docs.getPages()
9 | const codePages = p.filter((page) => page.slugs[0] === "code")
10 | const demoPages = codePages.filter(
11 | (page) => page.data.layout === "PreviewAndImplementation",
12 | )
13 |
14 | return demoPages.map((page) => {
15 | const { title, exports } = page.data
16 | const { default: MDX } = exports
17 | const { demo } = parseRoot(MDX, Block.extend({ demo: Block }), {
18 | components: { Demo, CodeWithNotes },
19 | })
20 | const href = `/docs/${page.slugs.join("/")}`
21 |
22 | return (
23 |
11 |
24 |
30 | )
31 | })
32 | }
33 |
--------------------------------------------------------------------------------
/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 | {title}
25 | {demo.children} 26 |27 | See {title} implementation. 28 |
29 |
32 |
36 | {annotation.data.children || (
37 |
40 | {annotation.query}
38 | )}
39 |
13 | {annotation?.query}
14 |
15 |
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/components/annotations/pill.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 | export const pill: AnnotationHandler = {
14 | name: "pill",
15 | Inline: ({ annotation, children }) => {
16 | const n = Number(annotation.query || "1")
17 | const bg = colors[n % colors.length]
18 | return {children}
19 | },
20 | }
21 |
22 | export function Pill({
23 | children,
24 | n = 1,
25 | }: {
26 | children: React.ReactNode
27 | n: number
28 | }) {
29 | const bg = colors[n % colors.length]
30 | return (
31 |
35 | {children}
36 |
37 | )
38 | }
39 |
--------------------------------------------------------------------------------
/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 |
--------------------------------------------------------------------------------
/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{children}
31 |
19 | {props.children}
20 |
21 |
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/components/copy-button.tsx:
--------------------------------------------------------------------------------
1 | "use client"
2 |
3 | import { Copy, Check } from "lucide-react"
4 | import * as React from "react"
5 | import { cn } from "../lib/utils"
6 |
7 | export function CopyButton({
8 | text,
9 | className,
10 | }: {
11 | text: string
12 | className?: string
13 | }) {
14 | const [copied, setCopied] = React.useState(false)
15 |
16 | return (
17 |
31 | )
32 | }
33 |
--------------------------------------------------------------------------------
/apps/web/components/demo.tsx:
--------------------------------------------------------------------------------
1 | import fs from "fs"
2 | import path from "path"
3 | import { Code } from "./code"
4 | import { cn } from "../lib/utils"
5 |
6 | export async function Demo({
7 | name,
8 | children,
9 | className,
10 | content = "content.md",
11 | }: {
12 | name: string
13 | content?: string
14 | children: React.ReactNode
15 | className?: string
16 | }) {
17 | const value = await fs.promises.readFile(
18 | path.join(process.cwd(), "demos", name, content),
19 | "utf-8",
20 | )
21 |
22 | const usage = (
23 |
37 |
44 | )
45 |
46 | return (
47 |
40 | {children}
41 |
42 | )}
43 | *]:flex-1 [&>*]:min-w-72",
50 | className,
51 | )}
52 | >
53 |
56 | )
57 | }
58 |
--------------------------------------------------------------------------------
/apps/web/components/layout-demo.tsx:
--------------------------------------------------------------------------------
1 | import fs from "fs"
2 | import path from "path"
3 | import { Tab, Tabs } from "next-docs-ui/components/tabs"
4 | import { Code } from "./code"
5 |
6 | export async function LayoutDemo({
7 | name,
8 | children,
9 | content = "content.md",
10 | }: {
11 | name: string
12 | content?: string
13 | children: React.ReactNode
14 | }) {
15 | const value = await fs.promises.readFile(
16 | path.join(process.cwd(), "demos", name, content),
17 | "utf-8",
18 | )
19 |
20 | const { default: Page } = await import(`@/demos/${name}/page`)
21 |
22 | return (
23 | {usage}
54 | {preview}
55 |
29 |
31 |
25 |
27 | )
28 | },
29 | }
30 |
--------------------------------------------------------------------------------
/apps/web/content/blog/headless-codeblocks.md:
--------------------------------------------------------------------------------
1 | ---
2 | title: Headless Codeblocks
3 | description: Headless codeblocks
4 | date: 2024-08-15
5 | authors: [pomber]
6 | draft: true
7 | ---
8 |
9 | TO DO
10 |
--------------------------------------------------------------------------------
/apps/web/content/blog/hello-server.mdx:
--------------------------------------------------------------------------------
1 | ---
2 | title: React Soup Components
3 | description: A fan-fiction about React and Food
4 | date: 2024-01-25
5 | authors: [pomber]
6 | draft: true
7 | ---
8 |
9 | Hello Server
10 |
--------------------------------------------------------------------------------
/apps/web/content/blog/known-keys.mdx:
--------------------------------------------------------------------------------
1 | ---
2 | title: Known keys
3 | description: When you need an object where all the keys are mapped to one type except some known keys that are mapped to different types.
4 | date: 2024-02-20
5 | authors: [pomber]
6 | draft: true
7 | ---
8 |
9 | Sources:
10 |
11 | - https://github.com/microsoft/TypeScript/issues/31153
12 | - https://github.dev/sindresorhus/type-fest/blob/main/source/merge.d.ts
13 |
14 | ```ts
15 | type MyType = {
16 | [s: string]: string
17 | foo: number
18 | }
19 | ```
20 |
21 | When you need an object where all the keys are mapped to one type except some known keys that are mapped to different types.
22 |
23 | Why Omit doesn't work:
24 |
25 | ```ts
26 | type Omit
52 | {children}
53 |
54 | )
55 | },
56 | }
57 |
58 | export function RemotionRoot() {
59 | return (
60 |
31 |
39 | {[...Array(length)].map((_, i) => (
40 |
59 | )
60 | }
61 |
--------------------------------------------------------------------------------
/apps/web/content/components/slideshow/slideshow.tsx:
--------------------------------------------------------------------------------
1 | import { Slides, Controls } from "./slides"
2 | import { Pre, RawCode, highlight } from "codehike/code"
3 |
4 | export function Slideshow({ hike }: { hike: any }) {
5 | return (
6 |
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/content/docs/api.tsx:
--------------------------------------------------------------------------------
1 | import { Block, parseProps } from "codehike/blocks"
2 | import { z } from "zod"
3 |
4 | export function Usage(props: unknown) {
5 | const { left, right, caption } = parseProps(
6 | props,
7 | Block.extend({ left: Block, right: Block, caption: Block.optional() }),
8 | )
9 | return (
10 | {step.children}
13 |
11 |
21 | )
22 | }
23 |
--------------------------------------------------------------------------------
/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 |
12 |
19 |
13 | {left.children}
14 |
15 |
16 | {right.children}
17 |
18 | {caption?.children}
20 | {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/content/docs/code/copy-button.mdx:
--------------------------------------------------------------------------------
1 | ---
2 | title: Copy Button
3 | description: Copy Button
4 | layout: PreviewAndImplementation
5 | ---
6 |
7 | ## !demo
8 |
9 | Add a copy button to a code block.
10 |
11 |
55 |
58 | )
59 | }
60 | ```
61 |
--------------------------------------------------------------------------------
/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 |
34 | {annotation?.query}
35 |
36 |
23 |
28 | )
29 | }
30 | ```
31 |
--------------------------------------------------------------------------------
/apps/web/content/docs/code/fold.mdx:
--------------------------------------------------------------------------------
1 | ---
2 | title: Fold
3 | description: Fold annotation
4 | layout: PreviewAndImplementation
5 | ---
6 |
7 | ## !demo
8 |
9 | Fold inline content.
10 |
11 |
24 | {highlighted.meta}
25 |
26 |
27 |
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/content/docs/code/link.mdx:
--------------------------------------------------------------------------------
1 | ---
2 | title: Link
3 | description: Add links to code snippets
4 | layout: PreviewAndImplementation
5 | ---
6 |
7 | ## !demo
8 |
9 | Add links to code snippets.
10 |
11 |
36 | {props.children}
37 |
38 | {title}
19 |{children}
20 |
21 | {blocks.map((example) => (
22 |
29 | 
30 |
34 |
30 | {example.title}
31 | 32 | ))} 33 |{children}
23 | ),
24 | }
25 |
26 | const bgHandler: AnnotationHandler = {
27 | name: "bg",
28 | Inline: ({ annotation, children }) => (
29 | {children}
30 | ),
31 | }
32 |
--------------------------------------------------------------------------------
/apps/web/demos/annotations/groups/content.md:
--------------------------------------------------------------------------------
1 | ```jsx
2 | // !border[/className="(.*?)"/gm] pink
3 | function Foo() {
4 | return (
5 |
6 | hey
7 |
8 | )
9 | }
10 | ```
11 |
--------------------------------------------------------------------------------
/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 {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/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/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
42 |
46 | {annotation.query}
47 |
48 |
49 | )
50 | },
51 | }
52 |
--------------------------------------------------------------------------------
/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/classname/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 {children}
23 | ),
24 | Inline: ({ annotation, children }) => (
25 | {children}
26 | ),
27 | }
28 |
--------------------------------------------------------------------------------
/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/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 |
--------------------------------------------------------------------------------
/apps/web/demos/copy-button/content.md:
--------------------------------------------------------------------------------
1 | ```js
2 | function lorem(ipsum, dolor = 1) {
3 | const sit = ipsum == null ? 0 : ipsum.sit
4 | dolor = sit - amet(dolor)
5 | return sit ? consectetur(ipsum) : []
6 | }
7 | ```
8 |
--------------------------------------------------------------------------------
/apps/web/demos/copy-button/page.tsx:
--------------------------------------------------------------------------------
1 | import { Pre, RawCode, highlight } from "codehike/code"
2 | import Content from "./content.md"
3 | import { CopyButton } from "./button"
4 |
5 | export default function Page() {
6 | return
14 |
17 | )
18 | }
19 |
--------------------------------------------------------------------------------
/apps/web/demos/diff/content.md:
--------------------------------------------------------------------------------
1 | ```js
2 | function lorem(ipsum, dolor = 1) {
3 | const sit = ipsum == null ? 0 : ipsum.sit
4 | // !diff -
5 | dolor = ipsum - sit
6 | // !diff +
7 | dolor = sit - amet(dolor)
8 | return sit ? consectetur(ipsum) : []
9 | }
10 | ```
11 |
--------------------------------------------------------------------------------
/apps/web/demos/filename/content.md:
--------------------------------------------------------------------------------
1 | ```js index.js
2 | function lorem(ipsum, dolor = 1) {
3 | const sit = ipsum == null ? 0 : 1
4 | dolor = sit - amet(dolor)
5 | return sit ? consectetur(ipsum) : []
6 | }
7 | ```
8 |
--------------------------------------------------------------------------------
/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/focus/code.tsx:
--------------------------------------------------------------------------------
1 | "use client"
2 |
3 | import { HighlightedCode, Pre } from "codehike/code"
4 | import React, { useState } from "react"
5 | import { focus } from "./focus"
6 |
7 | const ranges = {
8 | lorem: { fromLineNumber: 1, toLineNumber: 5 },
9 | ipsum: { fromLineNumber: 7, toLineNumber: 11 },
10 | dolor: { fromLineNumber: 11, toLineNumber: 15 },
11 | }
12 |
13 | export function CodeContainer({ code }: { code: HighlightedCode }) {
14 | const [focused, setFocused] = useState<"lorem" | "ipsum" | "dolor">("dolor")
15 |
16 | return (
17 | <>
18 |
32 |
13 | {highlighted.meta}
14 |
15 |
16 |
33 | You can also change the focus annotations on a rendered codeblock:
34 |
35 |
36 | {" "}
43 |
50 |
51 |
52 | )
53 | }
54 |
--------------------------------------------------------------------------------
/apps/web/demos/focus/content.md:
--------------------------------------------------------------------------------
1 | ```js
2 | function lorem(ipsum, dolor = 1) {
3 | const sit = ipsum == null ? 0 : ipsum.sit
4 | dolor = sit - amet(dolor)
5 | return sit ? consectetur(ipsum) : []
6 | }
7 |
8 | function ipsum(ipsum, dolor = 1) {
9 | return dolor
10 | }
11 |
12 | // !focus(1:5)
13 | function dolor(ipsum, dolor = 1) {
14 | const sit = ipsum == null ? 0 : ipsum.sit
15 | dolor = sit - amet(dolor)
16 | return sit ? consectetur(ipsum) : []
17 | }
18 | ```
19 |
--------------------------------------------------------------------------------
/apps/web/demos/focus/focus.client.tsx:
--------------------------------------------------------------------------------
1 | "use client"
2 |
3 | import React, { useLayoutEffect, useRef } from "react"
4 | import { AnnotationHandler, InnerPre, getPreRef } from "codehike/code"
5 |
6 | export const PreWithFocus: AnnotationHandler["PreWithRef"] = (props) => {
7 | const ref = getPreRef(props)
8 | useScrollToFocus(ref)
9 | return
6 | hey
7 |
8 | )
9 | }
10 | ```
11 |
--------------------------------------------------------------------------------
/apps/web/demos/fold/page.tsx:
--------------------------------------------------------------------------------
1 | import { RawCode, Pre, highlight, AnnotationHandler } from "codehike/code"
2 | import Content from "./content.md"
3 | import { InlineFold } from "./annotations"
4 |
5 | export default function Page() {
6 | return
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 |
21 |
26 |
45 | )
46 | }
47 |
--------------------------------------------------------------------------------
/apps/web/demos/language-switcher/page.tsx:
--------------------------------------------------------------------------------
1 | import { RawCode, highlight } from "codehike/code"
2 | import Content from "./content.mdx"
3 |
4 | import { Code } from "./multi-code"
5 |
6 | export default function Page() {
7 | return
27 |
43 |
44 |
32 |
36 | {props.lineNumber}
37 |
38 |
40 | )
41 | },
42 | }
43 |
--------------------------------------------------------------------------------
/apps/web/demos/link/content.md:
--------------------------------------------------------------------------------
1 | ```js
2 | function lorem(ipsum, dolor = 1) {
3 | const sit = ipsum == null ? 0 : ipsum.sit
4 | dolor = sit - amet(dolor)
5 | // !link[/ipsum/] https://example.com
6 | return sit ? consectetur(ipsum) : []
7 | }
8 | ```
9 |
--------------------------------------------------------------------------------
/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
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/occurrences/code.tsx:
--------------------------------------------------------------------------------
1 | "use client"
2 |
3 | import { HighlightedCode, Pre } from "codehike/code"
4 | import React from "react"
5 |
6 | export function CodeWithOccurrences({ code }: { code: HighlightedCode }) {
7 | const ref = React.useRef
20 |
21 | {isOpen &&
23 | )
24 | }
25 | ```
26 |
27 | It also works if you selecte a word from a paragraph, try: button or `Carousel`.
28 |
--------------------------------------------------------------------------------
/apps/web/demos/occurrences/page.tsx:
--------------------------------------------------------------------------------
1 | import { RawCode, Pre, highlight } from "codehike/code"
2 | import Content from "./content.md"
3 | import { CodeWithOccurrences } from "./code"
4 |
5 | export default function Page() {
6 | return
10 |
18 | {[...Array(length)].map((_, i) => (
19 |
38 | )
39 | }
40 |
--------------------------------------------------------------------------------
/apps/web/demos/slideshow/page.tsx:
--------------------------------------------------------------------------------
1 | import {
2 | Block,
3 | CodeBlock,
4 | parseRoot,
5 | } from "codehike/blocks"
6 | import Content from "./content.md"
7 | import { z } from "zod"
8 | import {
9 | Selection,
10 | SelectionProvider,
11 | } from "codehike/utils/selection"
12 | import { Pre, RawCode, highlight } from "codehike/code"
13 | import { Controls } from "./controls"
14 | import { tokenTransitions } from "@/components/annotations/token-transitions"
15 |
16 | const Schema = Block.extend({
17 | steps: z.array(Block.extend({ code: CodeBlock })),
18 | })
19 |
20 | export default function Page() {
21 | const { steps } = parseRoot(Content, Schema)
22 | return (
23 |
31 | step.children)}
33 | />
34 |
35 |
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/demos/token-transitions/content.md:
--------------------------------------------------------------------------------
1 | ```scala
2 | object Main {
3 | def factorial(n: Int): Int = {
4 | if (n == 0) {
5 | return 1
6 | } else {
7 | return n * factorial(n - 1)
8 | }
9 | }
10 | }
11 | ```
12 |
13 | ```python
14 | def factorial(n):
15 | if n == 0:
16 | return 1
17 | else:
18 | return n * factorial(n - 1)
19 | ```
20 |
--------------------------------------------------------------------------------
/apps/web/demos/token-transitions/content.mdx:
--------------------------------------------------------------------------------
1 | ```scala !!
2 | object Main {
3 | def factorial(n: Int): Int = {
4 | if (n == 0) {
5 | return 1
6 | } else {
7 | return n * factorial(n - 1)
8 | }
9 | }
10 | }
11 | ```
12 |
13 | ```python !!
14 | def factorial(n):
15 | if n == 0:
16 | return 1
17 | else:
18 | return n * factorial(n - 1)
19 | ```
20 |
--------------------------------------------------------------------------------
/apps/web/demos/token-transitions/page.tsx:
--------------------------------------------------------------------------------
1 | import { highlight } from "codehike/code"
2 | import Content from "./content.mdx"
3 | import { CodeSwitcher } from "./code"
4 | import { Block, CodeBlock, parseRoot } from "codehike/blocks"
5 | import { z } from "zod"
6 |
7 | export default async function Page() {
8 | const { code } = parseRoot(
9 | Content,
10 | Block.extend({ code: z.array(CodeBlock) }),
11 | )
12 |
13 | const infos = await Promise.all(
14 | code.map((codeblock: any) => highlight(codeblock, "github-dark")),
15 | )
16 | return
33 |
39 |
40 | {children}
17 | {option.content}
53 | }
54 |
--------------------------------------------------------------------------------
/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 |
--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "private": true,
3 | "scripts": {
4 | "build": "turbo build --filter=codehike...",
5 | "web": "turbo dev --filter=web --filter=codehike... ",
6 | "test": "turbo test",
7 | "clean": "turbo clean && rm -rf node_modules",
8 | "format": "prettier --write \"**/*.{ts,tsx,md,mdx}\"",
9 | "changeset": "changeset",
10 | "version-packages": "changeset version",
11 | "release": "changeset publish",
12 | "canary": "pkg-pr-new publish --json=canary.json --comment=off --compact './packages/codehike'"
13 | },
14 | "devDependencies": {
15 | "@changesets/read": "0.6.1",
16 | "@changesets/cli": "2.27.1",
17 | "@changesets/changelog-github": "0.5.0",
18 | "@octokit/action": "7.0.0",
19 | "@octokit/rest": "21.0.2",
20 | "@actions/exec": "1.1.1",
21 | "@actions/github": "6.0.0",
22 | "prettier": "^3.1.1",
23 | "turbo": "^1.11.2",
24 | "pkg-pr-new": "0.0.24",
25 | "human-id": "4.1.1",
26 | "unified": "11.0.5",
27 | "remark-parse": "11.0.0",
28 | "remark-stringify": "11.0.0",
29 | "mdast-util-to-string": "4.0.0"
30 | },
31 | "packageManager": "pnpm@9.7.1",
32 | "repository": "code-hike/codehike",
33 | "homepage": "https://codehike.org",
34 | "funding": {
35 | "type": "github",
36 | "url": "https://github.com/sponsors/code-hike"
37 | }
38 | }
39 |
--------------------------------------------------------------------------------
/packages/codehike/readme.md:
--------------------------------------------------------------------------------
1 | # Code Hike
2 |
3 | Build rich content websites with Markdown and React
4 |
5 | ## Quick Start
6 |
7 | Try it online on [StackBlitz](https://stackblitz.com/github/code-hike/v1-starter?file=app%2Fpage.mdx). Or clone the Code Hike starter:
8 |
9 | ```bash
10 | npx create-next-app -e https://github.com/code-hike/v1-starter
11 | ```
12 |
13 | ## Documentation
14 |
15 | See [https://codehike.org/docs](https://codehike.org/docs)
16 |
--------------------------------------------------------------------------------
/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 |
--------------------------------------------------------------------------------
/packages/codehike/src/code/pre-ref.tsx:
--------------------------------------------------------------------------------
1 | "use client"
2 |
3 | import { useRef } from "react"
4 | import { InnerPre } from "./inner.js"
5 | import { CustomPre } from "./types.js"
6 |
7 | export const AddRefIfNedded: CustomPre = (props: any) => {
8 | const innerRef = useRef(null)
9 | const ref = props._ref || innerRef
10 | // @ts-ignore
11 | return 9 | -------------------------------------------------------------------------------- /packages/codehike/tests/md-suite/assets/test.py: -------------------------------------------------------------------------------- 1 | # !mark inside 2 | import random 3 | my_list = [] -------------------------------------------------------------------------------- /packages/codehike/tests/md-suite/basic.0.mdx: -------------------------------------------------------------------------------- 1 | --- 2 | snapshots: 3 | - before-remark 4 | - after-remark 5 | - after-rehype 6 | - before-recma-compiled-js 7 | - before-recma-compiled-jsx 8 | - before-recma-compiled-function 9 | - before-recma-js 10 | - before-recma-js-dev 11 | - before-recma-jsx 12 | - after-recma-js 13 | - after-recma-js-dev 14 | - after-recma-jsx 15 | - compiled-js 16 | - compiled-js-dev 17 | - compiled-jsx 18 | - compiled-function 19 | - parsed-jsx 20 | - rendered 21 | - rendered-dev 22 | --- 23 | 24 | # Lorem 25 | 26 | !hello world 27 | -------------------------------------------------------------------------------- /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 | -------------------------------------------------------------------------------- /packages/codehike/tests/md-suite/basic.5.before-recma-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 | return ( 10 | <_components.slot 11 | __hike={{ 12 | children: "", 13 | title: "", 14 | _data: { 15 | header: "", 16 | }, 17 | hello: "world", 18 | }} 19 | > 20 | <_components.slot path=""> 21 | <_components.h1>{"Lorem"} 22 | 23 | 24 | ) 25 | } 26 | function MDXContent(props = {}) { 27 | const { wrapper: MDXLayout } = props.components || {} 28 | return MDXLayout ? ( 29 |const a = 1 8 |const b = 2
6 | Lorem 7 |
, 8 | "hello": "world", 9 | "title": "", 10 | } -------------------------------------------------------------------------------- /packages/codehike/tests/md-suite/basic.9.rendered-dev.html: -------------------------------------------------------------------------------- 1 |Lorem
2 | -------------------------------------------------------------------------------- /packages/codehike/tests/md-suite/basic.9.rendered.html: -------------------------------------------------------------------------------- 1 |Lorem
2 | -------------------------------------------------------------------------------- /packages/codehike/tests/md-suite/code-empty.0.mdx: -------------------------------------------------------------------------------- 1 | --- 2 | snapshots: 3 | - compiled-jsx 4 | - rendered 5 | --- 6 | 7 | {/* prettier-ignore */} 8 | ``` 9 | ``` 10 | -------------------------------------------------------------------------------- /packages/codehike/tests/md-suite/code-empty.7.compiled-jsx.jsx: -------------------------------------------------------------------------------- 1 | /*@jsxRuntime automatic @jsxImportSource react*/ 2 | /*prettier-ignore*/ 3 | function _createMdxContent(props) { 4 | const {MyCode} = props.components || ({}); 5 | if (!MyCode) _missingMdxReference("MyCode", true); 6 | return <>{}{"\n"}
3 | console.
4 | log
5 | (
6 | 1
7 | )
8 |
9 | 7 | hello 8 |
9 |10 | hey 11 |
12 |
4 | const
5 | a
6 | =
7 | 1
8 |
9 |
10 | const
11 | b
12 | =
13 | 2
14 |
15 |
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 | 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 |
--------------------------------------------------------------------------------
/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 |
--------------------------------------------------------------------------------
/packages/codehike/tests/md-suite/nested-blocks.0.mdx:
--------------------------------------------------------------------------------
1 | ---
2 | snapshots:
3 | - parsed-jsx
4 | ---
5 |
6 | hello
7 |
8 | # !one uno
9 |
10 | 1
11 |
12 | ## !!foo 111
13 |
14 | 1.1
15 |
16 | ### !bar b
17 |
18 | 1.1.1
19 |
20 | ### /
21 |
22 | more
23 |
24 | ## !!foo 222
25 |
26 | hey
27 |
28 | ## /
29 |
30 | ho
31 |
32 | ## !extra
33 |
34 | extra
35 |
36 | # /
37 |
38 | hey
39 |
--------------------------------------------------------------------------------
/packages/codehike/tests/md-suite/nested-blocks.8.parsed-jsx.jsx:
--------------------------------------------------------------------------------
1 | var block = {
2 | "_data": {
3 | "header": "",
4 | },
5 | "children": 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/no-hike.0.mdx: -------------------------------------------------------------------------------- 1 | --- 2 | snapshots: 3 | - compiled-jsx 4 | --- 5 | 6 | ## Hello world 7 | 8 |7 |a 6 |b
13 | -------------------------------------------------------------------------------- /packages/codehike/tests/md-suite/regex-range.0.mdx: -------------------------------------------------------------------------------- 1 | --- 2 | snapshots: 3 | - rendered 4 | --- 5 | 6 | ```jsx 7 | // !fold[/className="(.*?)"/gm] folded 8 | const Foo = () => ( 9 |a 12 |b
10 | hey
11 |
12 | )
13 | ```
14 |
--------------------------------------------------------------------------------
/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 |
--------------------------------------------------------------------------------
/packages/codehike/tests/md-suite/stacked-line.9.rendered.html:
--------------------------------------------------------------------------------
1 |
2 |
29 |
--------------------------------------------------------------------------------
/packages/codehike/tests/md-suite/stacked-token.0.mdx:
--------------------------------------------------------------------------------
1 | ---
2 | snapshots:
3 | - rendered
4 | ---
5 |
6 | ```js
7 | const a = 1
8 | // !mark(1:3) 1
9 | const b = 2
10 | // !mark 2
11 | const c = 3
12 | ```
13 |
--------------------------------------------------------------------------------
/packages/codehike/tests/md-suite/stacked-token.0.render.tsx:
--------------------------------------------------------------------------------
1 | import { MDXContent } from "mdx/types"
2 | import {
3 | AnnotationHandler,
4 | highlight,
5 | InnerPre,
6 | InnerToken,
7 | Pre,
8 | RawCode,
9 | } from "../../src/code"
10 | import React from "react"
11 |
12 | export function render(Content: MDXContent) {
13 | // @ts-ignore
14 | 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 | {children}
,
25 | Token: ({ annotation, ...props }) => (
26 |
27 |
2 |
29 |
--------------------------------------------------------------------------------
/packages/codehike/tests/md-suite/static-children.0.mdx:
--------------------------------------------------------------------------------
1 | ---
2 | snapshots:
3 | - before-recma-compiled-js
4 | - before-recma-js-dev
5 | - before-recma-js
6 | - after-recma-js
7 | - after-recma-js-dev
8 | - compiled-js
9 | - compiled-js-dev
10 | - rendered-dev
11 | issue: https://github.com/code-hike/codehike/issues/433
12 | ---
13 |
14 |
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 |
15 |
16 | hey
17 |
18 | ho
19 |
20 | ## !foo
21 |
22 | bar
23 |
24 |
25 |
26 |
2 |
5 | hey
3 |ho
4 |asdf
7 |aa
8 |console.log(1)
3 |