{"id":24085616,"url":"https://github.com/s9e/hljs-loader","last_synced_at":"2025-07-30T10:42:41.319Z","repository":{"id":66251398,"uuid":"215860119","full_name":"s9e/hljs-loader","owner":"s9e","description":"Loader for the highlight.js library","archived":false,"fork":false,"pushed_at":"2024-12-14T16:43:17.000Z","size":107,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":3,"default_branch":"master","last_synced_at":"2025-01-10T01:53:54.360Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"language":"JavaScript","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/s9e.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}},"created_at":"2019-10-17T18:30:10.000Z","updated_at":"2024-12-14T16:43:20.000Z","dependencies_parsed_at":"2024-07-15T11:15:35.591Z","dependency_job_id":null,"html_url":"https://github.com/s9e/hljs-loader","commit_stats":null,"previous_names":[],"tags_count":38,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/s9e%2Fhljs-loader","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/s9e%2Fhljs-loader/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/s9e%2Fhljs-loader/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/s9e%2Fhljs-loader/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/s9e","download_url":"https://codeload.github.com/s9e/hljs-loader/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":240971555,"owners_count":19886772,"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","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-01-10T01:53:57.922Z","updated_at":"2025-02-27T03:24:01.004Z","avatar_url":"https://github.com/s9e.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"hljs-loader is a small (3 KB) script that can be added to any webpage to automatically load and run [highlight.js](https://highlightjs.org/) on all `pre \u003e code` blocks. It automatically loads additional languages specified via the first `lang-*` or `language-*` class name of each code block.\n\n\n### Usage\n\nAdd this anywhere to your HTML page:\n\n```html\n\u003cscript defer src=\"https://cdn.jsdelivr.net/gh/s9e/hljs-loader@1.0.36/loader.min.js\"\n        crossorigin=\"anonymous\"\n        integrity=\"sha384-ENgSnUL5UgeHebIZiuTpRAT4+a3licJ29eIcCndVuHFJvncvtdJoQL0XIBStbgl9\"\u003e\u003c/script\u003e\n```\n\n\n### Configuration\n\nNo configuration is required but a number of options are available and can be set on the `script` element that loads this script.\n\n```html\n\u003cscript defer src=\"https://cdn.jsdelivr.net/gh/s9e/hljs-loader@1.0.36/loader.min.js\"\n        crossorigin=\"anonymous\"\n        data-hljs-observe=\"body\"\n        data-hljs-options='{\"classPrefix\":\"\"}'\n        data-hljs-style=\"github\"\n        data-hljs-url=\"https://cdn.jsdelivr.net/gh/highlightjs/cdn-release@11.11.0/build/\"\n        integrity=\"sha384-ENgSnUL5UgeHebIZiuTpRAT4+a3licJ29eIcCndVuHFJvncvtdJoQL0XIBStbgl9\"\u003e\u003c/script\u003e\n```\n\n\u003cdl\u003e\n\u003cdt\u003e\u003ccode\u003edata-hljs-observe\u003c/code\u003e\u003c/dt\u003e\n\u003cdd\u003eThe value should be a CSS selector such as \u003ccode\u003ebody\u003c/code\u003e or \u003ccode\u003e#content\u003c/code\u003e. The first element that matches this selector will be observed for changes via a \u003ca href=\"https://developer.mozilla.org/en-US/docs/Web/API/MutationObserver\"\u003eMutationObserver\u003c/a\u003e instance and new code blocks will be automatically highlighted.\u003c/dd\u003e\n\n\u003cdt\u003e\u003ccode\u003edata-hljs-options\u003c/code\u003e\u003c/dt\u003e\n\u003cdd\u003eThe value should be a JSON-encoded object that will be passed to \u003ccode\u003ehljs.configure()\u003c/code\u003e.\u003c/dd\u003e\n\n\u003cdt\u003e\u003ccode\u003edata-hljs-style\u003c/code\u003e\u003c/dt\u003e\n\u003cdd\u003eName of the highlight.js style to load. If set to \u003ccode\u003enone\u003c/code\u003e, no style will be loaded. Defaults to \u003ccode\u003edefault\u003c/code\u003e.\u003c/dd\u003e\n\n\u003cdt\u003e\u003ccode\u003edata-hljs-url\u003c/code\u003e\u003c/dt\u003e\n\u003cdd\u003eThe root URL used for loading highlight.js files. Defaults to jsDelivr's URL.\u003c/dd\u003e\n\u003c/dl\u003e\n\n\n### API\n\nBy default, all code blocks are highlighted when the library is loaded and you do not need to call the library explicitly. However, there may be some situations where you want to manually trigger highlighting or observe a section of the page for new code blocks.\n\n\u003cdl\u003e\n\u003cdt\u003e\u003ccode\u003ehljsLoader.highlightBlocks(element)\u003c/code\u003e\u003c/dt\u003e\n\u003cdd\u003eHighlight all blocks in element's subtree. New languages may be loaded and some blocks may be highlighted asynchronously.\n\n```js\nhljsLoader.highlightBlocks(document.body);\n```\n\u003c/dd\u003e\n\n\u003cdt\u003e\u003ccode\u003ehljsLoader.observe(selector)\u003c/code\u003e\u003c/dt\u003e\n\u003cdd\u003eObserve the first element that matches given CSS selector and automatically highlight new code blocks.\n\n```js\nhljsLoader.observe('#id');\n```\n\u003c/dd\u003e\n\n\u003cdt\u003e\u003ccode\u003ehljsLoader.disconnect()\u003c/code\u003e\u003c/dt\u003e\n\u003cdd\u003eDisconnect the observer and stop looking for new code blocks.\u003c/dd\u003e\n\u003c/dl\u003e\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fs9e%2Fhljs-loader","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fs9e%2Fhljs-loader","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fs9e%2Fhljs-loader/lists"}