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 |
8 | const ContentSchema = Block.extend({
9 | demo: Block,
10 | implementation: Block,
11 | })
12 |
13 | export function PreviewImplementation({ MDX }: { MDX: any }) {
14 | const { demo, implementation } = parseRoot(MDX, ContentSchema, {
15 | components: { Demo },
16 | })
17 |
18 | return (
19 | <>
20 | {demo.children}
21 | Implementation
22 | {implementation.children} 23 | 24 | ) 25 | } 26 | -------------------------------------------------------------------------------- /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/logo.drivly.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/code-hike/v1/6a8b19251c2c7b2e0dd68d1a0007679bc2fa5b77/apps/web/app/landing/logo.drivly.png -------------------------------------------------------------------------------- /apps/web/app/landing/logo.github.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/code-hike/v1/6a8b19251c2c7b2e0dd68d1a0007679bc2fa5b77/apps/web/app/landing/logo.github.png -------------------------------------------------------------------------------- /apps/web/app/landing/logo.meta.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/code-hike/v1/6a8b19251c2c7b2e0dd68d1a0007679bc2fa5b77/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/v1/6a8b19251c2c7b2e0dd68d1a0007679bc2fa5b77/apps/web/app/landing/placeholdifier-monospace.woff2 -------------------------------------------------------------------------------- /apps/web/app/landing/placeholdifier.woff2: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/code-hike/v1/6a8b19251c2c7b2e0dd68d1a0007679bc2fa5b77/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/gh-sponsors.js: -------------------------------------------------------------------------------- 1 | require("dotenv").config({ path: ".env.local" }) 2 | 3 | const GITHUB_TOKEN = process.env.GITHUB_TOKEN 4 | if (!GITHUB_TOKEN) { 5 | console.log("Missing process.env.GITHUB_TOKEN") 6 | process.exit(1) 7 | } 8 | 9 | async function fetchSponsors() { 10 | let pageInfo = { hasNextPage: true, endCursor: null } 11 | let sponsors = [] 12 | 13 | while (pageInfo.hasNextPage) { 14 | const page = await fetchPage(pageInfo.endCursor) 15 | sponsors = sponsors.concat(page.nodes) 16 | pageInfo = page.pageInfo 17 | } 18 | 19 | return sponsors.map(({ sponsor, amountInCents }) => ({ 20 | name: sponsor.login, 21 | amount: Math.round(amountInCents / 100), 22 | })) 23 | } 24 | 25 | async function fetchPage(cursor) { 26 | const query = `{ 27 | organization(login: "code-hike") { 28 | lifetimeReceivedSponsorshipValues(first: 100, after: "${cursor}") { 29 | nodes { 30 | amountInCents 31 | sponsor { 32 | ... on User { login } 33 | ... on Organization { login } 34 | } 35 | } 36 | pageInfo { 37 | endCursor 38 | hasNextPage 39 | } 40 | } 41 | } 42 | }` 43 | const r = await fetch("https://api.github.com/graphql", { 44 | method: "POST", 45 | body: JSON.stringify({ query }), 46 | headers: { Authorization: "bearer " + GITHUB_TOKEN }, 47 | }) 48 | if (!r.ok) { 49 | console.error(r) 50 | return 51 | } 52 | const { data, errors } = await r.json() 53 | if (errors) { 54 | console.error(JSON.stringify(errors)) 55 | return 56 | } 57 | return data.organization.lifetimeReceivedSponsorshipValues 58 | } 59 | 60 | module.exports = fetchSponsors 61 | -------------------------------------------------------------------------------- /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/v1/6a8b19251c2c7b2e0dd68d1a0007679bc2fa5b77/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 | 18 | 19 |4 | 404 5 |
6 | ) 7 | } 8 | -------------------------------------------------------------------------------- /apps/web/app/play/page.tsx: -------------------------------------------------------------------------------- 1 | export default function Playground() { 2 | return ( 3 |
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
7 |
9 | )
10 | }
11 |
--------------------------------------------------------------------------------
/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 |
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 |
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/from-remark-to-rsc.mdx:
--------------------------------------------------------------------------------
1 | ---
2 | title: From Remark to React Server Components
3 | description: The right abstraction for better flexibility and composability
4 | date: 2024-02-20
5 | authors: [pomber]
6 | draft: true
7 | ---
8 |
9 | A remark plugin is a function that transforms pieces of a markdown file.
10 |
--------------------------------------------------------------------------------
/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/code.mdx:
--------------------------------------------------------------------------------
1 | ---
2 | title: Code
3 | description: The Code component
4 | ---
5 |
6 | ```txt
7 | // TO DO
8 | ```
9 |
--------------------------------------------------------------------------------
/apps/web/content/docs/api/hike.mdx:
--------------------------------------------------------------------------------
1 | ---
2 | title: Hike
3 | description: The Hike component
4 | ---
5 |
6 | ```txt
7 | // TO DO
8 | ```
9 |
--------------------------------------------------------------------------------
/apps/web/content/docs/api/schema.mdx:
--------------------------------------------------------------------------------
1 | ---
2 | title: Schema
3 | description: Hike Schema
4 | ---
5 |
6 | ```js
7 | // TO DO
8 | ```
9 |
--------------------------------------------------------------------------------
/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 | {step.children}
13 | {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/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/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
13 | {highlighted.meta}
14 |
15 |
16 |
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
27 |
32 |
41 | )
42 | }
43 |
44 | export const footnotes: AnnotationHandler = {
45 | name: "ref",
46 | AnnotatedLine: ({ annotation, ...props }) => {
47 | return (
48 | -
33 | {notes.map((ref, index) => (
34 |
-
35 |
36 | {ref} 37 |
38 | ))}
39 |
49 |
52 | )
53 | },
54 | }
55 |
56 | function Number({ n }: { n: number }) {
57 | return (
58 |
62 | )
63 | }
64 |
--------------------------------------------------------------------------------
/apps/web/demos/hover/content.mdx:
--------------------------------------------------------------------------------
1 |
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 |
--------------------------------------------------------------------------------
/apps/web/ui/toggle.tsx:
--------------------------------------------------------------------------------
1 | "use client"
2 |
3 | import * as React from "react"
4 | import * as TogglePrimitive from "@radix-ui/react-toggle"
5 | import { cva, type VariantProps } from "class-variance-authority"
6 |
7 | import { cn } from "@/lib/utils"
8 |
9 | const toggleVariants = cva(
10 | "inline-flex items-center justify-center rounded-md text-sm font-medium ring-offset-white transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-zinc-950 focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 dark:ring-offset-zinc-950 dark:focus-visible:ring-zinc-300",
11 | {
12 | variants: {
13 | variant: {
14 | default: "bg-transparent",
15 | tabs: "hover:bg-zinc-700 hover:text-zinc-200 text-zinc-400 data-[state=on]:text-zinc-100",
16 | outline:
17 | "border border-zinc-200 bg-transparent hover:bg-zinc-100 hover:text-zinc-900 dark:border-zinc-800 dark:hover:bg-zinc-800 dark:hover:text-zinc-50",
18 | },
19 | size: {
20 | default: "h-10 px-3",
21 | sm: "h-6 px-2 -m-1 text-xs",
22 | lg: "h-11 px-5",
23 | },
24 | },
25 | defaultVariants: {
26 | variant: "default",
27 | size: "default",
28 | },
29 | },
30 | )
31 |
32 | const Toggle = React.forwardRef<
33 | React.ElementRef9 | -------------------------------------------------------------------------------- /packages/codehike/tests/md-suite/assets/test.py: -------------------------------------------------------------------------------- 1 | import random 2 | 3 | my_list = [1, 'a', 32, 'c', 'd', 31] 4 | print(random.choice(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-jsx 11 | - after-recma-js 12 | - after-recma-jsx 13 | - compiled-js 14 | - compiled-jsx 15 | - compiled-function 16 | - parsed-jsx 17 | - rendered 18 | --- 19 | 20 | # Lorem 21 | 22 | !hello world 23 | -------------------------------------------------------------------------------- /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.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-highlighted.9.rendered.html:
--------------------------------------------------------------------------------
1 |
2 |
3 | var
4 | x
5 | =
6 | 1
7 |
8 |
10 | hello
11 |
12 | <
13 | div
14 | class
15 | =
16 | "2"
17 | >hey</
18 | div
19 | >
20 |
21 | world
22 |
24 | two lines
25 |
26 | var
27 | x
28 | =
29 | 1
30 | var
31 | y
32 | =
33 | 2
34 |
35 |
37 | extra meta
38 |
39 | var
40 | x
41 | =
42 | 1
43 |
44 |
46 | lorem 47 | just emphasize 48 | ipsum 49 |
50 | -------------------------------------------------------------------------------- /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/inline-code.9.rendered.html:
--------------------------------------------------------------------------------
1 |
2 |
3 | var
4 | x
5 | =
6 | 1
7 |
8 |
10 | hello
11 |
12 | <
13 | div
14 | class
15 | =
16 | "2"
17 | >hey</
18 | div
19 | >
20 |
21 | world
22 |
24 | two lines
25 |
26 | var
27 | x
28 | =
29 | 1
30 | var
31 | y
32 | =
33 | 2
34 |
35 |
37 | extra meta
38 |
39 | var
40 | x
41 | =
42 | 1
43 |
44 |
46 | lorem 47 | just emphasize 48 | ipsum 49 |
50 | -------------------------------------------------------------------------------- /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/syntax-highlight.0.mdx:
--------------------------------------------------------------------------------
1 | ---
2 | syntaxHighlight: github-dark
3 | snapshots:
4 | - compiled-jsx
5 | ---
6 |
7 | ```js lorem.js
8 | // !mark[6:10] hey
9 | const a = 1
10 | ```
11 |
12 | ```js !foo bar.js
13 | // !mark 1
14 | const b = 2
15 | ```
16 |
--------------------------------------------------------------------------------
/packages/codehike/tests/md-suite/two-ps.0.mdx:
--------------------------------------------------------------------------------
1 | ---
2 | snapshots:
3 | - before-remark
4 | - parsed-jsx
5 | ---
6 |
7 | ## !valid
8 |
9 | !a1 1
10 | !!a2 2
11 | 2
12 | !a3 3
13 |
14 | 
15 | 
16 |
17 | !c1 1
18 | cc
19 | 
20 |
21 | 
22 | !!d2 2
23 |
24 | !e1 1
25 | ee ee
26 | ee
27 |
28 | ## !invalid
29 |
30 | ff ff
31 | !f1 dd
32 |
33 | gg gg
34 | 
35 |
36 | 
37 | hh hh
38 |
39 | ii  ii
40 |
41 | 
42 | jjj
43 | !j2 2
44 |
--------------------------------------------------------------------------------
/packages/codehike/tests/md-suite/unknown-lang.0.mdx:
--------------------------------------------------------------------------------
1 | ---
2 | snapshots:
3 | - rendered
4 | ---
5 |
6 | ```firulete
7 | console.log(1)
8 | ```
9 |
--------------------------------------------------------------------------------
/packages/codehike/tests/md-suite/unknown-lang.9.rendered.html:
--------------------------------------------------------------------------------
1 |
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 | console.log(1)
3 |