{"id":18041628,"url":"https://github.com/katyo/highlight-ts","last_synced_at":"2025-07-25T04:08:42.543Z","repository":{"id":57264145,"uuid":"130067864","full_name":"katyo/highlight-ts","owner":"katyo","description":"HighlightJS in TypeScript and ECMAScript6","archived":false,"fork":false,"pushed_at":"2018-12-04T07:36:42.000Z","size":193,"stargazers_count":16,"open_issues_count":1,"forks_count":1,"subscribers_count":2,"default_branch":"master","last_synced_at":"2025-06-10T18:23:47.339Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"other","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/katyo.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}},"created_at":"2018-04-18T13:37:18.000Z","updated_at":"2025-03-10T21:03:29.000Z","dependencies_parsed_at":"2022-08-25T02:51:58.318Z","dependency_job_id":null,"html_url":"https://github.com/katyo/highlight-ts","commit_stats":null,"previous_names":[],"tags_count":4,"template":false,"template_full_name":null,"purl":"pkg:github/katyo/highlight-ts","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/katyo%2Fhighlight-ts","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/katyo%2Fhighlight-ts/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/katyo%2Fhighlight-ts/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/katyo%2Fhighlight-ts/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/katyo","download_url":"https://codeload.github.com/katyo/highlight-ts/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/katyo%2Fhighlight-ts/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":266952614,"owners_count":24011507,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","status":"online","status_checked_at":"2025-07-25T02:00:09.625Z","response_time":70,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"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":[],"created_at":"2024-10-30T16:11:07.174Z","updated_at":"2025-07-25T04:08:42.515Z","avatar_url":"https://github.com/katyo.png","language":"TypeScript","readme":"# HighlightJS in TypeScript (and ES6)\n\n[![License: BSD](https://img.shields.io/badge/License-BSD-brightgreen.svg)](https://opensource.org/licenses/BSD-3-Clause)\n[![npm version](https://badge.fury.io/js/highlight-ts.svg)](https://badge.fury.io/js/highlight-ts)\n[![npm downloads](https://img.shields.io/npm/dm/highlight-ts.svg)](https://www.npmjs.com/package/highlight-ts)\n[![Build Status](https://travis-ci.org/katyo/highlight-ts.svg?branch=master)](https://travis-ci.org/katyo/highlight-ts)\n\nThis is a port of the __[highlight.js](https://highlightjs.org/)__ to a [TypeScript](https://www.typescriptlang.org/) (as well as ECMAScript 6).\n\n__NOTE: Currently not all languages are supported. PRs are welcome.__\n\n## Usage example\n\n```typescript\nimport {\n  Options,\n  Highlighter,\n\n  // import basic APIs\n  registerLanguages,\n  htmlRender,\n  init,\n  process,\n  \n  // import preferred languages\n  CPlusPlus,\n  TypeScript,\n  JavaScript,\n  Python,\n  Lua,\n  Markdown\n} from 'highlight-ts';\n\n// register languages\nregisterLanguages(\n  CPlusPlus,\n  TypeScript,\n  JavaScript,\n  Python,\n  Lua,\n  Markdown\n);\n\nconst options: Options = {\n  classPrefix: '',\n  /* other options */\n};\n\n// initialize highlighter\nconst highlighter: Highlighter\u003cstring\u003e\n  = init(htmlRender, options);\n\nconst source = `\ninterface Point {\n  x: number,\n  y: number,\n}\n\nfunction distance(a: Point, b: Point): number {\n  return Math.sqrt(\n    (a.x - b.x) ** 2 +\n    (a.y - b.y) ** 2);\n}\n`;\n\n// render source with given language mode\nconst language = 'ts';\nconst html = process(highlighter, source, language);\n\n// or highligh source using auto language detection\nconst languages = ['ts', 'js', 'md'];\nconst html = process(highlighter, source, languages);\n\n// auto detection using all known language modes\nconst html = process(highlighter, source);\n\n// display result\nelm.innerHTML = `\u003cpre\u003e${html}\u003c/pre\u003e`;\n```\n\n## Differences from original\n\n* Complete re-implementation using modern JavaScript syntax and features.\n* No module-global state and configuration excluding the language modes registry.\n* ES6 Module Syntax to compatibility with modern bundlers like __Rollup__ which support _Tree-Shaking_.\n* Support renderer API to render to HTML text as well as to a DOM-nodes directly or by VirtualDOM engines.\n* Compiled mode it is another object not same as a source what get a little bit lower memory usage.\n* Replaced some utility functions by ES6 syntax extensions which is provided by __tslib__ for _ES5_ target.\n* Fixed some modes to get more correct or advanced highlight.\n\n## Renderer API\n\nCurrently the renderer API is quite simple:\n\n```typescript\nexport interface Renderer\u003cOutput\u003e {\n    text(chunk: string): Output;\n    wrap(className: string, chunk: Output): Output;\n    join(chunks: Output[]): Output;\n}\n```\n\n1. The `text()` call is using to render textual piece of source code.\n2. The `wrap()` call is using to wrap rendered chunk into span with specified class.\n3. The `join()` call is using to join several rendered chunks into single chunk.\n\nBy example we can implement HTML renderer like this:\n\n```typescript\nimport { Renderer } from 'highligh-ts';\n\nconst htmlRender: Renderer\u003cstring\u003e = {\n    text: (chunk: string) =\u003e chunk\n        .replace(/\u0026/g, '\u0026amp;')\n        .replace(/\u003c/g, '\u0026lt;')\n        .replace(/\u003e/g, '\u0026gt;'),\n    join: (chunks: string[]) =\u003e chunks.join(''),\n    wrap: (className: string, chunk: string) =\u003e\n        `\u003cspan class=\"${className}\"\u003e${chunk}\u003c/span\u003e`\n};\n```\n\n## HighlightJS API\n\nSee the [types.ts](src/types.ts) source to understand highlight mode definition syntax.\n\nRead the original [highlightjs docs](http://highlightjs.readthedocs.io/en/latest/) to get more help how to implement syntax highlighting modes.\n","funding_links":[],"categories":[],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fkatyo%2Fhighlight-ts","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fkatyo%2Fhighlight-ts","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fkatyo%2Fhighlight-ts/lists"}