{"id":27648145,"url":"https://github.com/stackexchange/prosemirror-highlightjs","last_synced_at":"2025-07-24T00:37:45.228Z","repository":{"id":37959925,"uuid":"271926304","full_name":"StackExchange/prosemirror-highlightjs","owner":"StackExchange","description":null,"archived":false,"fork":false,"pushed_at":"2025-03-28T18:47:26.000Z","size":1252,"stargazers_count":19,"open_issues_count":2,"forks_count":1,"subscribers_count":3,"default_branch":"master","last_synced_at":"2025-07-11T20:25:10.292Z","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":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/StackExchange.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}},"created_at":"2020-06-13T02:27:27.000Z","updated_at":"2025-04-05T09:31:22.000Z","dependencies_parsed_at":"2024-06-18T18:33:23.435Z","dependency_job_id":"f2eb4983-32f9-4e0e-bf80-88417388cf77","html_url":"https://github.com/StackExchange/prosemirror-highlightjs","commit_stats":{"total_commits":102,"total_committers":2,"mean_commits":51.0,"dds":0.009803921568627416,"last_synced_commit":"5fb7d8f1d1306b46005bd8836db93d4f248f657a"},"previous_names":["b-kelly/prosemirror-highlightjs"],"tags_count":13,"template":false,"template_full_name":null,"purl":"pkg:github/StackExchange/prosemirror-highlightjs","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/StackExchange%2Fprosemirror-highlightjs","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/StackExchange%2Fprosemirror-highlightjs/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/StackExchange%2Fprosemirror-highlightjs/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/StackExchange%2Fprosemirror-highlightjs/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/StackExchange","download_url":"https://codeload.github.com/StackExchange/prosemirror-highlightjs/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/StackExchange%2Fprosemirror-highlightjs/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":266774798,"owners_count":23982247,"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-23T02:00:09.312Z","response_time":66,"last_error":null,"robots_txt_status":null,"robots_txt_updated_at":null,"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":"2025-04-24T02:23:29.116Z","updated_at":"2025-07-24T00:37:45.202Z","avatar_url":"https://github.com/StackExchange.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# prosemirror-highlightjs\n\n## Usage\n\n```js\nimport hljs from \"highlight.js/lib/core\";\nimport { highlightPlugin } from \"prosemirror-highlightjs\";\n\nlet state = new EditorView(..., {\n  state: EditorState.create({\n    doc: ...,\n    plugins: [highlightPlugin(hljs)],\n  })\n});\n```\n\nOr import just the decoration parser and write your own plugin:\n\n```js\nimport { getHighlightDecorations } from \"prosemirror-highlightjs\";\n\nlet plugin = new Plugin({\n    state: {\n        init(config, instance) {\n            let content = getHighlightDecorations(\n                instance.doc,\n                hljs,\n                blockTypes,\n                languageExtractor\n            );\n            return DecorationSet.create(instance.doc, content);\n        },\n        apply(tr, set) {\n            if (!tr.docChanged) {\n                return set.map(tr.mapping, tr.doc);\n            }\n\n            let content = getHighlightDecorations(\n                tr.doc,\n                hljs,\n                blockTypes,\n                languageExtractor\n            );\n            return DecorationSet.create(tr.doc, content);\n        },\n    },\n    props: {\n        decorations(state) {\n            return this.getState(state);\n        },\n    },\n});\n```\n\n## Theming considerations\n\nDue to how ProseMirror renders decorations, some existing highlight.js themes might not work as expected.\nProseMirror collapses all nested/overlapping decoration structures, causing a structure such as\n`.hljs-function \u003e (.hljs-keyword + .hljs-title)` to instead render as `.hljs-function.hljs-keyword + .hljs-function.hljs.title`.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fstackexchange%2Fprosemirror-highlightjs","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fstackexchange%2Fprosemirror-highlightjs","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fstackexchange%2Fprosemirror-highlightjs/lists"}