{"id":31250580,"url":"https://github.com/quadnucyard/typst-hypraw","last_synced_at":"2026-02-14T06:31:30.424Z","repository":{"id":299032237,"uuid":"1001512381","full_name":"QuadnucYard/typst-hypraw","owner":"QuadnucYard","description":"A lightweight package for creating headless code blocks for html export","archived":false,"fork":false,"pushed_at":"2025-12-07T14:24:38.000Z","size":64,"stargazers_count":5,"open_issues_count":0,"forks_count":0,"subscribers_count":0,"default_branch":"main","last_synced_at":"2025-12-09T23:39:46.681Z","etag":null,"topics":["code-highlight","html","typst"],"latest_commit_sha":null,"homepage":"","language":"Typst","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/QuadnucYard.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null,"notice":null,"maintainers":null,"copyright":null,"agents":null,"dco":null,"cla":null}},"created_at":"2025-06-13T14:04:13.000Z","updated_at":"2025-12-08T13:42:14.000Z","dependencies_parsed_at":null,"dependency_job_id":"43061931-a817-469d-8c74-33b1f87914ce","html_url":"https://github.com/QuadnucYard/typst-hypraw","commit_stats":null,"previous_names":["quadnucyard/typst-hypraw"],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/QuadnucYard/typst-hypraw","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/QuadnucYard%2Ftypst-hypraw","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/QuadnucYard%2Ftypst-hypraw/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/QuadnucYard%2Ftypst-hypraw/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/QuadnucYard%2Ftypst-hypraw/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/QuadnucYard","download_url":"https://codeload.github.com/QuadnucYard/typst-hypraw/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/QuadnucYard%2Ftypst-hypraw/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":29438764,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-02-14T05:24:35.651Z","status":"ssl_error","status_checked_at":"2026-02-14T05:24:34.830Z","response_time":53,"last_error":"SSL_read: unexpected eof while reading","robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":false,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["code-highlight","html","typst"],"created_at":"2025-09-23T05:31:46.758Z","updated_at":"2026-02-14T06:31:30.419Z","avatar_url":"https://github.com/QuadnucYard.png","language":"Typst","funding_links":[],"categories":[],"sub_categories":[],"readme":"\u003ch1\u003e\n\nHypraw\n\n\u003c/h1\u003e\n\n\u003ca href=\"https://typst.app/universe/package/hypraw\"\u003e\n\n\u003cimg src=\"https://img.shields.io/badge/dynamic/xml?url=https%3A%2F%2Ftypst.app%2Funiverse%2Fpackage%2Fhypraw\u0026amp;query=%2Fhtml%2Fbody%2Fdiv%2Fmain%2Fdiv%5B2%5D%2Faside%2Fsection%5B2%5D%2Fdl%2Fdd%5B3%5D\u0026amp;logo=typst\u0026amp;label=Universe\u0026amp;color=%2339cccc\" alt=\"Universe\" /\u003e\n\n\u003c/a\u003e \u003ca href=\"https://github.com/QuadnucYard/typst-hypraw\"\u003e\n\n\u003cimg src=\"https://img.shields.io/badge/dynamic/toml?url=https%3A%2F%2Fraw.githubusercontent.com%2FQuadnucYard%2Ftypst-hypraw%2Frefs%2Fheads%2Fmain%2Ftypst.toml\u0026amp;query=package.version\u0026amp;logo=GitHub\u0026amp;label=GitHub\" alt=\"GitHub\" /\u003e\n\n\u003c/a\u003e\n\nA lightweight package for creating headless code blocks optimized for HTML export. Inspired by [zebraw](https://github.com/hongjr03/typst-zebraw).\n\n**Important**: This package does NOT and will NOT support non-HTML targets. In this case, it just takes no effect.\n\n## Features\n\n- Generates clean, semantic HTML structure\n- CSS class deduplication for smaller output\n- **Line numbers** — expressive-code styled gutter with proper accessibility\n- **Line highlight** — expressive-code styled line highlight, customized with your CSS\n- **Copy button support** — headless, accessible, and customizable\n\n## Installation\n\n- From [Typst Universe](https://typst.app/universe/package/hypraw)\n- [typship](https://github.com/sjfhsjfh/typship) package manager\n- Manual installation to local packages directory\n- Git submodule in your project\n\n## Usage\n\nImport from `@preview/hypraw` and enable it with `#show: hypraw`.\n\n```typst\n#import \"@preview/hypraw:0.1.0\": *\n#show: hypraw\n```\n\nThen write your code blocks as usual, and insert additional CSS styles if needed.\n\n````typ\nHere's inline code: `println!(\"Hello!\")`\n\n```rust\nfn main() {\n    println!(\"Hello, world!\");\n}\n```\n\n#hypraw-styles(read(\"styles.css\"))\n````\n\nSee `examples/` directory for complete styling implementation.\n\nWe do not provide any official CSS styles to maintain a minimal package size. You can copy our example styles from `examples/` and adapt them to your needs.\n\n**Important**: `hypraw` is stateless and should only be used once per document. It applies globally to all code blocks in the document. Multiple `#show: hypraw` calls are unnecessary and should be avoided.\n\n## API\n\n### `hypraw(..)`\n\nEnables enhanced HTML code block rendering.\n\n```typ\n// Enable hypraw for entire document (use only once)\n#show: hypraw\n\n// Enable line numbers (expressive-code style)\n#show: hypraw.with(line-numbers: true)\n\n// To disable copy button for entire document\n#show: hypraw.with(copy-button: false)\n\n// Custom settings for entire document\n#show: hypraw.with(dedup-styles: false, attach-styles: false)\n```\n\n### `hypraw-set(line-numbers: auto, highlight: auto, copy-button: auto)`\n\nOverride settings for the **next** code block only (`auto` denotes default). Resets after use.\n\n```typ\n// Disable line numbers for this block (when globally enabled)\n#hypraw-set(line-numbers: none)\n\n// Start from line 2\n#hypraw-set(line-numbers: 2)\n\n// Custom labels per line (e.g., for diff display)\n#hypraw-set(line-numbers: (\"+\", \"-\"))\n\n// Highlight specific lines (1-based index)\n#hypraw-set(highlight: (1, 3))          // Lines 1 and 3\n#hypraw-set(highlight: (1, (3, 5)))     // Line 1 and lines 3-5\n\n// Use specific highlight classes (ins/del/mark)\n// You need to set styles for these classes in the css\n#hypraw-set(highlight: (ins: (1, 3), del: (4,)))\n```\n\n### `additional-styles()`\n\nReturns additional style strings when deduplication is enabled. Call this when you set `attach-styles` to `false`.\n\n### `html-style(style)`\n\nAdds custom CSS styles for HTML output. Accepts a CSS string or file content.\n\n```typ\n#html-style(\".hypraw { background: #f5f5f5; }\")\n// Or read from file\n#html-style(read(\"styles.css\"))\n```\n\n### `html-script(script)`\n\nSimilar to `html-style`, it creates a `\u003cscript\u003e` element.\n\n## HTML Output\n\nGenerates headless HTML structure that you can style with your own CSS:\n\n```html\n\u003cdiv class=\"hypraw\"\u003e\n  \u003cbutton class=\"hypraw-copy-btn\" aria-label=\"Copy code\" data-copy=\"...\" /\u003e\n  \u003cpre\u003e\u003ccode data-lang=\"rust\"\u003e\n    \u003cspan class=\"c0\"\u003efn\u003c/span\u003e \u003cspan class=\"c1\"\u003emain\u003c/span\u003e...\n  \u003c/code\u003e\u003c/pre\u003e\n\u003c/div\u003e\n```\n\nThe copy button feature provides a `data-copy` attribute with the raw code content. You need to inject your scripts to output. You can refer to the example implementation in [copy-button.css](examples/copy-button.css).\n\n### With Line Numbers\n\nWhen `line-numbers: true` is enabled, the structure includes a gutter:\n\n```html\n\u003cdiv class=\"hypraw has-line-numbers\" style=\"--ln-width:3ch\"\u003e\n  \u003cpre\u003e\u003ccode data-lang=\"rust\"\u003e\u003cdiv class=\"ec-line\"\u003e\u003cdiv class=\"gutter\"\u003e\u003cdiv class=\"ln\"\u003e\u003cspan aria-hidden=\"true\"\u003e1\u003c/span\u003e\u003c/div\u003e\u003c/div\u003e\u003cdiv class=\"code\"\u003e\u003cspan class=\"c0\"\u003efn\u003c/span\u003e \u003cspan class=\"c1\"\u003emain\u003c/span\u003e() {\u003c/div\u003e\u003c/div\u003e\u003c!-- More lines... --\u003e\u003c/code\u003e\u003c/pre\u003e\n\u003c/div\u003e\n```\n\n## Why Another Package\n\n[zebraw](https://github.com/hongjr03/typst-zebraw) is a GREAT versatile package for code blocks. However, it tends to produce heavy output, which compromises load time and is hard to tweak from the outside. Therefore, I developed `hypraw`, a lightweight package where you can custom almost everything with CSS.\n\n## License\n\nMIT License — see [LICENSE](LICENSE) for details.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fquadnucyard%2Ftypst-hypraw","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fquadnucyard%2Ftypst-hypraw","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fquadnucyard%2Ftypst-hypraw/lists"}