{"id":22300347,"url":"https://github.com/dropseed/codeplus","last_synced_at":"2025-03-25T23:23:42.175Z","repository":{"id":246955719,"uuid":"414253703","full_name":"dropseed/codeplus","owner":"dropseed","description":"Make your code elements interactive.","archived":false,"fork":false,"pushed_at":"2024-09-12T16:34:54.000Z","size":473,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-03-25T04:53:04.801Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"","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/dropseed.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":"2021-10-06T14:50:47.000Z","updated_at":"2024-09-12T16:34:38.000Z","dependencies_parsed_at":null,"dependency_job_id":"fdf9809e-9e7a-41ac-aa2b-c3d679d57956","html_url":"https://github.com/dropseed/codeplus","commit_stats":null,"previous_names":["dropseed/codeplus"],"tags_count":13,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/dropseed%2Fcodeplus","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/dropseed%2Fcodeplus/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/dropseed%2Fcodeplus/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/dropseed%2Fcodeplus/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/dropseed","download_url":"https://codeload.github.com/dropseed/codeplus/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":245557905,"owners_count":20635061,"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":"2024-12-03T18:10:35.772Z","updated_at":"2025-03-25T23:23:37.155Z","avatar_url":"https://github.com/dropseed.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# codeplus\n\nAdd interactive elements to your `\u003ccode\u003e` without a bunch of custom markup or JavaScript.\n\n- filenames\n- tabs and tab groups (with \"remember tab selection\")\n- copy button\n\n![CleanShot 2022-04-29 at 10 08 41](https://user-images.githubusercontent.com/649496/165995663-91479c8c-e49a-4d3b-ab9f-2e0a044301fe.gif)\n\nThe key to codeplus is that you don't have to do much to make it work,\nand your code blocks also look fine when it's not in use.\nIf you're writing docs in markdown,\nfor example,\nyou want those to look *normal* on GitHub and other sites where you don't have control over the markdown rendering.\nUsers should still be able to read everything in that form.\nBut when you render the same code on *your* site,\nyou get an extra layer of interactivity just by adding `codeplus` on top.\n\nThis library does not do syntax highlighting!\nThat means you can use any server-side (or client-side) syntax highlighter you want and codeplus will add the interactive features after the fact.\n\n## Features\n\n### Filenames\n\nTo render filenames all you need to do is start your code block with a comment line that says the filename:\n\n```yaml\n# .pullapprove.yml\nversion: 3\ngroups: ...\n```\n\nWhen codeplus runs, you'll get something like this:\n\n\u003cimg width=\"718\" alt=\"CleanShot 2022-04-29 at 12 24 58@2x\" src=\"https://user-images.githubusercontent.com/649496/165993479-c4b051b8-28ab-4874-bf41-cad379af4229.png\"\u003e\n\n### Tab display name\n\nInstead of filenames, you can also use a \"display name\" in parenetheses:\n\n```yaml\n# (GitHub)\nversion: 3\ngroups: ...\n```\n\nOr you can include a filename *and* a display name:\n\n```yaml\n# .pullapprove.yml (GitHub)\nversion: 3\ngroups: ...\n```\n\nWith codeplus:\n\n\u003cimg width=\"704\" alt=\"CleanShot 2022-04-29 at 12 25 11@2x\" src=\"https://user-images.githubusercontent.com/649496/165993506-1dbb33b5-89e9-4fd6-8f02-99ab32d16e8c.png\"\u003e\n\n### Tab groups\n\nTo get a group of tabs, just put the code blocks right next to each other:\n\n```yaml\n# (GitHub)\nversion: 3\ngroups: ...\n```\n\n```yaml\n# (Bitbucket)\nversion: 3\ngroups: ...\n```\n\nWith codeplus:\n\n\u003cimg width=\"711\" alt=\"CleanShot 2022-04-29 at 12 25 36@2x\" src=\"https://user-images.githubusercontent.com/649496/165993539-b8f5a86f-d5e6-4ae4-a038-e8c11ebaf75f.png\"\u003e\n\n### Copy button\n\nThe copy/paste button is added to all code blocks by default (shown on hover in this example):\n\n\u003cimg width=\"715\" alt=\"CleanShot 2022-04-29 at 12 26 55@2x\" src=\"https://user-images.githubusercontent.com/649496/165993684-2ddd8770-1741-4222-8d88-1abeaa885185.png\"\u003e\n\n### Remember tab selection\n\nA nice use of tabs is to separate examples by language or ecosystem.\nIf you're browsing docs in \"Python\" mode for example,\nyou probably want to see the Python tab on every page you visit.\n\nWe can do this for you with localStorage:\n\n![CleanShot 2022-04-29 at 10 25 41](https://user-images.githubusercontent.com/649496/165994437-1eb3f42a-d848-4190-a388-9f8b2a11deff.gif)\n\n\n## Installation\n\n```sh\nnpm install @dropseed/codeplus\n```\n\n```js\nimport Codeplus from \"@dropseed/codeplus\";\n\nwindow.addEventListener('load', function() {\n    new Codeplus({}).render();\n});\n```\n\n### CDN\n\n```html\n\u003cscript src=\"https://unpkg.com/@dropseed/codeplus@0.7.0/dist/codeplus.js\"\u003e\u003c/script\u003e\n\u003cscript\u003e\nwindow.addEventListener(\"load\", function() {\n    new Codeplus({}).render();\n});\n\u003c/script\u003e\n```\n\n## Options\n\n```js\nnew Codeplus({\n    // The query selector to find your code elements\n    selector: \"pre \u003e code\",\n    // Saves a user's tab selection in localStorage and shows that tab on page load (ex. \"Python\")\n    rememberTabSelections: true,\n    // Enable debug console.logs\n    debug: false,\n    // Use classes to add styling (or look at the default CSS classes)\n    instanceClass: \"rounded-t-none group\",\n    navClass: \"bg-black rounded-t overflow-hidden\",\n    tabClass: \"px-3 py-2 text-sm text-gray-300 hover:text-gray-100\",\n    activeTabClass: \"bg-[#282c34]\",\n    inactiveTabClass: \"\",\n    copyButtonClass: \"items-center group-hover:flex hidden rounded border border-gray-200 px-2 py-1 text-sm\",\n    // Custom render for the tabs\n    renderTab: function(tab, instance) {\n        const icon = \"...\";\n        tab.innerHTML = icon + tab.innerHTML;\n    },\n    // Custom render for the copy button\n    renderCopyButton: function(copyButton, instance, copied) {\n        if (!copied) {\n            copyButton.innerHTML = `\u003csvg xmlns=\"http://www.w3.org/2000/svg\" fill=\"currentColor\" class=\"w-4 h-4 bi bi-clipboard\" viewBox=\"0 0 16 16\"\u003e\u003cpath d=\"M4 1.5H3a2 2 0 0 0-2 2V14a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2V3.5a2 2 0 0 0-2-2h-1v1h1a1 1 0 0 1 1 1V14a1 1 0 0 1-1 1H3a1 1 0 0 1-1-1V3.5a1 1 0 0 1 1-1h1v-1z\"/\u003e\u003cpath d=\"M9.5 1a.5.5 0 0 1 .5.5v1a.5.5 0 0 1-.5.5h-3a.5.5 0 0 1-.5-.5v-1a.5.5 0 0 1 .5-.5h3zm-3-1A1.5 1.5 0 0 0 5 1.5v1A1.5 1.5 0 0 0 6.5 4h3A1.5 1.5 0 0 0 11 2.5v-1A1.5 1.5 0 0 0 9.5 0h-3z\"/\u003e\u003c/svg\u003e Copy`;\n        }\n    },\n}).render();\n```\n\n## Styling\n\nStyling can be done either with inserting classes via [options](#options) or by using the default CSS classes:\n\n```css\n.codeplus {}\n.codeplus-group {}\n.codeplus-nav {}\n.codeplus-tab {}\n.codeplus-tab.active {}\n.codeplus-tab.inactive {}\n.codeplus-instances {}\n.codeplus-instance {}\n.codeplus-copy-btn {}\n```\n\nBy default there are only a few styles for basic layout help.\nAny colors, font sizes, etc. are up to you and will probably be similar to your syntax highlighting theme.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdropseed%2Fcodeplus","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fdropseed%2Fcodeplus","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdropseed%2Fcodeplus/lists"}