{"id":13805476,"url":"https://github.com/justinribeiro/code-block","last_synced_at":"2025-04-12T02:06:09.681Z","repository":{"id":34735218,"uuid":"181792945","full_name":"justinribeiro/code-block","owner":"justinribeiro","description":"A web component that displays colorfully formatted code with Prism.js and LitElement.","archived":false,"fork":false,"pushed_at":"2023-07-18T23:03:18.000Z","size":292,"stargazers_count":30,"open_issues_count":2,"forks_count":8,"subscribers_count":0,"default_branch":"main","last_synced_at":"2025-03-25T21:47:36.998Z","etag":null,"topics":["code-block","lit","prismjs","webcomponent"],"latest_commit_sha":null,"homepage":"https://www.npmjs.com/package/@justinribeiro/code-block","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/justinribeiro.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}},"created_at":"2019-04-17T01:18:28.000Z","updated_at":"2024-11-25T22:35:26.000Z","dependencies_parsed_at":"2024-04-09T22:50:44.944Z","dependency_job_id":"aab375d6-1d5c-4df1-ad26-1f69cb8c0a98","html_url":"https://github.com/justinribeiro/code-block","commit_stats":{"total_commits":13,"total_committers":1,"mean_commits":13.0,"dds":0.0,"last_synced_commit":"f0fa9b8048f29dcf15ed40bed0ad37e04b129dff"},"previous_names":[],"tags_count":2,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/justinribeiro%2Fcode-block","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/justinribeiro%2Fcode-block/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/justinribeiro%2Fcode-block/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/justinribeiro%2Fcode-block/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/justinribeiro","download_url":"https://codeload.github.com/justinribeiro/code-block/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248032498,"owners_count":21036609,"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":["code-block","lit","prismjs","webcomponent"],"created_at":"2024-08-04T01:01:01.547Z","updated_at":"2025-04-12T02:06:09.652Z","avatar_url":"https://github.com/justinribeiro.png","language":"JavaScript","readme":"[![npm version](https://badge.fury.io/js/%40justinribeiro%2Fcode-block.svg)](https://badge.fury.io/js/%40justinribeiro%2Fcode-block)\n\n# \\\u003ccode-block\\\u003e\n\n\u003e A web component that displays colorfully formatted code with Prism.js and Lit.\n\n![screenshot of code-block](https://user-images.githubusercontent.com/643503/56254054-0ce02600-6074-11e9-9caf-e9dcc25b3ab1.png)\n\n## Features\n\n* Loads [Prism.js](https://prismjs.com/) language definitions on demand via dynamic imports from `node_modules/prismjs/components/`\n* Loads Prism.js custom themes\n* Built as a web component on [Lit](https://lit.dev/)\n\n## Install\n\nThis web component is built with ES modules in mind and is\navailable on NPM:\n\nInstall code-block:\n\n```sh\nnpm i @justinribeiro/code-block\n# or\nyarn add @justinribeiro/code-block\n```\n\nAfter install, import into your project:\n\n```js\nimport '@justinribeiro/code-block';\n```\n\nFinally, use as required:\n\n```html\n\u003ccode-block language=\"javascript\"\u003e\nfunction helloWorld(say) {\n  console.log(say);\n}\n\nhelloWorld('Hi there!');\n\u003c/code-block\u003e\n```\n\n## Attributes\n\nThe web component allows certain attributes to be give a little additional\nflexibility.\n\n | Name | Description | Default |\n | --- | --- | --- |\n | `language` | Code language you wish to utilize from Prism | `clike` |\n | `theme` | Path to Prism CSS theme file | `/node_modules/prismjs/themes/prism.css` |\n\n## Building\n\nIf you want the ability to load the full spectrum of languages that Prism supports, you'll want to make sure your build script includes the `/node_modules/prismjs/**`, as there are many many language resources (and you don't want them all in your bundle, utilize the dynamic loading).\n","funding_links":[],"categories":["Standalone Components"],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fjustinribeiro%2Fcode-block","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fjustinribeiro%2Fcode-block","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fjustinribeiro%2Fcode-block/lists"}