{"id":15387991,"url":"https://github.com/break-stuff/code-bubble","last_synced_at":"2025-04-15T17:33:11.973Z","repository":{"id":247702614,"uuid":"826461557","full_name":"break-stuff/code-bubble","owner":"break-stuff","description":"This component provide inline code examples that link out to StackBlitz sandboxes","archived":false,"fork":false,"pushed_at":"2025-02-12T21:20:34.000Z","size":1673,"stargazers_count":11,"open_issues_count":0,"forks_count":2,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-03-29T00:24:00.602Z","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/break-stuff.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","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":"2024-07-09T18:48:25.000Z","updated_at":"2025-03-14T20:11:16.000Z","dependencies_parsed_at":"2024-08-18T05:25:58.825Z","dependency_job_id":"ec9c6a31-6ab3-4268-92e1-19c11a020dc2","html_url":"https://github.com/break-stuff/code-bubble","commit_stats":{"total_commits":112,"total_committers":3,"mean_commits":"37.333333333333336","dds":"0.017857142857142905","last_synced_commit":"fd8bc78cc42915fb3d0dcbdbe6ce52a5e8a369a2"},"previous_names":["break-stuff/stack-blitz-code-block","break-stuff/code-blox"],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/break-stuff%2Fcode-bubble","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/break-stuff%2Fcode-bubble/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/break-stuff%2Fcode-bubble/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/break-stuff%2Fcode-bubble/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/break-stuff","download_url":"https://codeload.github.com/break-stuff/code-bubble/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":249118989,"owners_count":21215651,"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-10-01T14:55:13.675Z","updated_at":"2025-04-15T17:33:11.966Z","avatar_url":"https://github.com/break-stuff.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"\u003cdiv align=\"center\"\u003e\n  \u003cimg src=\"https://github.com/break-stuff/code-bubble/raw/main/img/logo.png?raw=true\" alt=\"code bubble logo\" width=\"200px\" style=\"max-width: 100%;\" /\u003e\n\u003c/div\u003e\n\n\n# Code Bubble\n\nThis is a platform agnostic web component designed to showcase code examples and generate sandbox environments in [CodePen](https://codepen.io/) or [StackBlitz](https://stackblitz.com/).\n\n\u003cdiv align=\"center\"\u003e\n\n![code bubble example](https://github.com/break-stuff/code-bubble/blob/main/img/code-bubble.png?raw=true)\n\n![code bubble example with source code open](https://github.com/break-stuff/code-bubble/blob/main/img/code-bubble_open.png?raw=true)\n\n\u003c/div\u003e\n\nFeatures:\n\n- ✅ Global configuration\n- ✅ Create multiple instances of the bubble with unique configurations\n- ✅ Code preview\n- ✅ Supports examples from multiple languages\n- ✅ Language code toggle\n- ✅ RTL toggle\n- ✅ Open in Sandbox (currently supports [CodePen](https://codepen.io/) and [StackBlitz](https://stackblitz.com/))\n- ✅ Copy code button\n- ✅ Framework example selection sync across instances\n- ✅ Persist selected language\n- ✅ Custom labels\n- ✅ Custom icons\n- ✅ Event hooks\n- ✅ Preview resize\n\n\u003cbr\u003e\n\n[![Open in StackBlitz](https://developer.stackblitz.com/img/open_in_stackblitz.svg)](https://stackblitz.com/edit/stackblitz-starters-tnmjhu?file=index.html)\n\n## Usage\n\nImport the desired sandbox configuration at the root of your project:\n\n```ts\nimport { CodeBubble, CodeBubbleConfig } from 'code-bubble';\n\nconst options: CodeBubbleConfig {\n  /* configuration options */\n};\n\nnew CodeBubble(options);\n```\n\n### Use the Components\n\nOnce the project is configured, that's it! Start using the components.\n\nIf you are using it markdown, be sure to include new lines between the markdown code block.\n\n````html\n\u003ccode-bubble\u003e\n\n```html\n\u003cmy-button appearance=\"accent\"\u003eAccent\u003c/my-button\u003e\n``` \n\n```jsx\n\u003cMyButton appearance=\"accent\"\u003eAccent\u003c/MyButton\u003e\n```\n\n\u003c/code-bubble\u003e\n````\n\nIf you are using it HTML, the component will be looking for `\u003cpre\u003e` element with a nested `\u003ccode\u003e` element.\n\nUnfortunately, markdown parsers don't follow a consistent pattern for identifying the language for a code block so the componet will look for `class=\"language-html\"` or `data-language=\"html\"` on the parent, `pre`, or `code` elements to help identify which code block it is (for react it would be `class=\"language-jsx\"`/`data-language=\"jsx\"`).\n\nThe `\u003ccode\u003e` element should contain escaped characters for the tags to properly render the examples.\n\n```html\n\u003ccode-bubble\u003e\n  \u003cpre\u003e\n    \u003ccode class=\"language-html\"\u003e\n\u0026lt;my-button appearance=\u0026quot;accent\u0026quot;\u0026gt;Accent\u0026lt;/my-button\u0026gt;\n    \u003c/code\u003e\n  \u003c/pre\u003e\n\n  \u003cpre\u003e\n    \u003ccode class=\"language-jsx\"\u003e\n\u0026lt;MyButton appearance=\u0026quot;accent\u0026quot;\u0026gt;Accent\u0026lt;/MyButton\u0026gt;\n    \u003c/code\u003e\n  \u003c/pre\u003e\n\u003c/code-bubble\u003e\n```\n\n## Configuration\n\nThe components are pre-configured and should work without any custom configuration, but if you would like to customize the implementation, each sandbox has it's own options.\n\n```ts\n/** Global configuration for a code bubble instance */\ntype CodeBubbleConfig = {\n  /** Which sandbox environment your code will open in */\n  sandbox?: 'codepen' | 'stackblitz';\n  /** Configuration for the component rendered on the site */\n  component?: ComponentConfig;\n  /** Configurations for the sandboxes */\n  sandboxConfig?: {\n    /** CodePen sandbox configuration */\n    codePen?: FrameworkConfig\u003cCodePen\u003e;\n    /** StackBlitz sandbox configuration */\n    stackBlitz?: FrameworkConfig\u003cStackBlitz\u003e;\n  };\n  /** Callback functions for the code bubble component */\n  hooks?: {\n    /** Callback function that runs when the code is copied */\n    onCopy?: () =\u003e void;\n    /** Callback function when the RTL button is toggled */\n    onRtl?: (isRtl: boolean) =\u003e void;\n    /** Callback function that runs when a sandbox is opened */\n    onSandboxOpen?: (config: ProjectConfig\u003cCodePen | StackBlitz\u003e) =\u003e void;\n    /** Callback function that runs when the code is shown */\n    onShowCode?: (isShowCode: boolean) =\u003e void;\n    /** Callback function that runs when a language is selected */\n    onLanguageChange?: (language: string) =\u003e void;\n  };\n};\n```\n\n### Component Configuration\n\nThe component configuration is the same for each of the sandbox environments. These globally control the component behavior.\n\n```ts\n/** Configuration for the component rendered on the site */\ntype ComponentConfig = {\n  /** Code bubble component tag name - must contain a dash, start with a letter and be lower-case */\n  tagName?: string;\n  /** Opens the \"show code\" section by default */\n  showCode?: boolean;\n  /** Indicates which example to show by default */\n  defaultExample?: string;\n  /** Configuration for the code preview */\n  preview?: {\n    /** Hides the preview window where the code is rendered */\n    hide?: boolean;\n  };\n  /** Configuration for the copy code button */\n  copyCodeButton?: {\n    /** Text displayed in the \"copy code\" button */\n    label?: string;\n    /** Text displayed in the \"copy code\" button when the code has been copied */\n    copiedLabel?: string;\n    /** Hides the \"copy code\" button */\n    hide?: boolean;\n    /** Icon displayed in the \"copy code\" button - SVG string */\n    icon?: string;\n    /** Visually hides the label text */\n    hideLabel?: boolean;\n  };\n  /** Configuration for the RTL button */\n  rtlButton?: {\n    /** Text displayed in the \"RTL\" button */\n    label?: string;\n    /** Hides the \"RTL\" button */\n    hide?: boolean;\n    /** Icon displayed in the \"RTL\" button - SVG string */\n    icon?: string;\n    /** Visually hides the label text */\n    hideLabel?: boolean;\n  };\n  /** Configuration for the sandbox button */\n  sandboxButton?: {\n    /** Text displayed in the \"sandbox\" button */\n    label?: string;\n    /** Hides the \"sandbox\" button */\n    hide?: boolean;\n    /** Icon displayed in the \"sandbox\" button - SVG string */\n    icon?: string;\n    /** Visually hides the label text */\n    hideLabel?: boolean;\n  };\n  /** Configuration for the resize button */\n  resizeButton?: {\n    /** Text displayed in the \"sandbox\" button */\n    label?: string;\n    /** Hides the \"sandbox\" button */\n    hide?: boolean;\n    /** Icon displayed in the \"sandbox\" button - SVG string */\n    icon?: string;\n  };\n  /** Configuration for the framework toggle buttons */\n  frameworkButtons?: {\n    /** Hides the HTML and React code toggle buttons */\n    hide?: boolean;\n    /** Text displayed in the framework buttons  */\n    label?: (framework: string) =\u003e string;\n    /** Icon displayed in the framework buttons - SVG string */\n    icon?: (framework: string) =\u003e string;\n    /** Visually hides the label text */\n    hideLabel?: boolean;\n  };\n  /** Configuration for the \"show code\" toggle button */\n  showCodeButton?: {\n    /** Text displayed when example code is opened  */\n    openedLabel?: string;\n    /** Text displayed when example code is closed  */\n    closedLabel?: string;\n    /** Icon displayed in the button when closed - SVG string */\n    openedIcon?: string;\n    /** Icon displayed in the button when opened - SVG string */\n    closedIcon?: string;\n    /** Hides the \"show code\" button */\n    hide?: boolean;\n    /** Visually hides the label text */\n    hideLabel?: boolean;\n  };\n};\n```\n\n#### Defining Framework Labels\n\nWhen specifying a code block, developers can specify a framework label.\n\n````html\n\n```html\n```\n\n```jsx\n```\n\n```ruby\n```\n\n````\n\nThese labels will be used by default for the framework toggle buttons at the bottom of the code bubble. These may not be as useful as you would like them to be for your users (or you may need to provide translations), so you can map new labels for them.\n\n```tsx\nnew CodeBlock({\n  component: {\n    frameworkButtonLabel: (framework) =\u003e ({\n      html: 'HTML',\n      jsx: 'React',\n      ruby: 'Ruby'\n    }[framework] || framework),\n  },\n});\n```\n\n### Sandbox Configuration\n\nEach sandbox supports any framework variation.\n\n```ts\ntype FrameworkConfig\u003cT extends CodePen | StackBlitz\u003e = {\n  /** CodePen project configuration for language examples */\n  [key: string]: ProjectConfig\u003cT\u003e;\n};\n\ntype ProjectConfig\u003cT extends CodePen | StackBlitz\u003e = {\n  /** Sandbox API configuration */\n  project?: T;\n  /** Controls how the code is rendered in the example */\n  exampleTemplate: ExampleTemplateConfig;\n};\n\nexport type ExampleTemplateConfig = {\n  /** Indicates which code block has the template */\n  // eslint-disable-next-line @typescript-eslint/ban-types\n  fileName: 'html' | 'css' | 'js' | (string \u0026 {});\n  /** Template function that returns the code block with the example in it */\n  template: string;\n};\n```\n\n#### CodePen\n\n```ts\ntype CodePen = {\n  /** Pen title */\n  title?: string;\n  /** Pen description */\n  description?: string;\n  /** When the Pen is saved, it will save as Private if logged in user has that privledge, otherwise it will save as public */\n  private?: boolean;\n  /** If supplied, the Pen will save as a fork of this id. Note it's not the slug, but ID. You can find the ID of a Pen with `window.CP.pen.id` in the browser console. */\n  parent?: string;\n  /** Words to help identify and categorize the sandbox */\n  tags?: string[];\n  /** Set which editors are open. \"1\" is open and \"0\" is collapsed. The order is \"HTML\", \"CSS\", and \"JS\" */\n  editors?: '001' | '010' | '100' | '011' | '101' | '110' | '111';\n  /** Determines the position of the code */\n  layout?: 'top' | 'left' | 'right';\n  /** Content in the HTML panel */\n  html?: string;\n  /** Specifies an alternative markup syntax  */\n  html_pre_processor?: 'none' | 'slim' | 'haml' | 'markdown';\n  /** Content in the HTML panel */\n  css?: string;\n  /** Specifies an alternative style syntax */\n  css_pre_processor?: 'none' | 'less' | 'scss' | 'sass' | 'stylus';\n  /** Adds a CSS reset or normalizer to your pen */\n  css_starter?: 'normalize' | 'reset' | 'neither';\n  /** Adds vendor prefixes to your CSS */\n  css_prefix?: 'autoprefixer' | 'prefixfree' | 'neither';\n  /** Content in the HTML panel */\n  js?: string;\n  /** Specifies an alternative script syntax */\n  js_pre_processor?:\n    | 'none'\n    | 'coffeescript'\n    | 'babel'\n    | 'livescript'\n    | 'typescript';\n  /** Class names applied to the `\u003chtml\u003e` element */\n  html_classes?: string;\n  /** Content for the `\u003chead\u003e` tag */\n  head?: string;\n  /** Semi-colon separate list of CDN urls to include in the pen */\n  css_external?: string;\n  /** Semi-colon separate list of CDN urls to include in the pen */\n  js_external?: string;\n};\n```\n\n### StackBlitz\n\n```ts\ntype StackBlitz = {\n  title?: string;\n  description?: string;\n  /**\n   * Provide project files, as code strings.\n   *\n   * Binary files and blobs are not supported.\n   */\n  files?: {\n    [name: string]: string;\n  };\n};\n```\n\n### Customizing the Code Example\n\nEach of the project configurations has an `exampleTemplate` property that allows you configure how your example gets rendered. The `fileName` indicates which file or code block them template is in and `template` shows an example of how your example code should be rendered in the template file.\n\n```ts\nconst config: FrameworkConfig\u003cStackBlitz\u003e = {\n  html: {\n    exampleTemplate: {\n      fileName: 'index.html',\n      template: `\u003c!doctype html\u003e\n\u003chtml lang=\"en\"\u003e\n  \u003chead\u003e\n    \u003cmeta charset=\"UTF-8\" /\u003e\n    \u003clink rel=\"icon\" type=\"image/svg+xml\" href=\"/vite.svg\" /\u003e\n    \u003cmeta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" /\u003e\n    \u003ctitle\u003eVite App\u003c/title\u003e\n  \u003c/head\u003e\n  \u003cbody\u003e\n    \u003cdiv id=\"app\"\u003e\n      %example%\n    \u003c/div\u003e\n    \u003cscript type=\"module\" src=\"/main.js\"\u003e\u003c/script\u003e\n  \u003c/body\u003e\n\u003c/html\u003e`,\n    },\n  },\n};\n```\n\n## Creating Different Code Bubble Types\n\nYou may need to be able to create code bubbles with different configurations. To do that, you create a new instance of the `CodeBubble` _with a custom tag name_.\n\n```tsx\nnew CodeBubble({\n  /* \u003ccode-bubble\u003e - default code bubble config */\n});\n\nnew CodeBubble({\n  /* \u003cts-bubble\u003e - code bubble config for TypeScript examples */\n  component: {\n    tagName: 'ts-bubble'\n  }\n});\n```\n\nYou will now have an alternative custom element for your TypeScript examples.\n\n````html\n\u003ccode-bubble\u003e\n\n```html\n```\n\n```jsx\n```\n\n\u003c/code-bubble\u003e\n````\n\n````html\n\u003cts-bubble\u003e\n\n```ts\n```\n\n```js\n```\n\n\u003c/ts-bubble\u003e\n````\n\n## Globally Setting Framework\n\nIf you need to globally set the set the selected framework, the `CodeBubble` instance has a `setLanguage(lang: string)` method that can be used to globally set the components associated to that instance's selected framework. \n\n```ts\nconst bubble = new CodeBubble({\n  /* code bubble config */\n});\n\nbubble.setLanguage('ruby');\n```\n\n## Setting Custom Preview\n\nThe preview will be generated based on the HTML example provided. If the preview needs to be rendered by a framework or templating language, you can slot in a preview and allow the code to be executed so it can be rendered correctly.\n\n````html\n\u003ccode-bubble\u003e\n\n\u003cdiv slot=\"preview\"\u003e\n  \u003cMyButton\u003eButton Content\u003c/MyButton\u003e\n\u003c/div\u003e\n\n```vue\n\u003cMyButton\u003eButton Content\u003c/MyButton\u003e\n```\n\n\u003c/code-bubble\u003e\n````\n\n## Hooks\n\nThese hooks are designed to allow you to tap into component interactions to create custom behaviors within your application.\n\n```ts\n{\n  /** Callback function that runs when the code is copied */\n  onCopy?: () =\u003e void;\n  /** Callback function when the RTL button is toggled */\n  onRtl?: (isRtl: boolean) =\u003e void;\n  /** Callback function that runs when a sandbox is opened */\n  onSandboxOpen?: (config: ProjectConfig\u003cCodePen | StackBlitz\u003e) =\u003e void;\n  /** Callback function that runs when the code section is toggled */\n  onShowCode?: (isShowCode: boolean) =\u003e void;\n  /** Callback function that runs when a language is selected */\n  onLanguageChange: (language: string) =\u003e void;\n}\n```\n\n### `onCopy`\n\nThis is called when the \"copy code\" button is clicked within the example.\n\n### `onRtl`\n\nThis is called when the \"RTL\" button is toggled, after the `isRtl` value is updated.\n\n### `onSandboxOpen`\n\nThis will be called before the standbox is opened and the `config` parameter gives you access to the sandbox configuration so you can update any values to capture any real-time contextual information like the selected theme or light/dark mode settings.\n\n### `onShowCode`\n\nThis is called when the example code window is toggled after the `isShowCode` value is updated.\n\n### `onLanguageChange`\n\nThis is called when the language example is changed and the `language` value has been updated.\n\n## Reload Attempts\n\nDepending on the framework and the library used to format your code, there may be a delay between when Code Bubble loads and when the code examples are rendered. To prevent empty examples, Code bubble will retry to load the code at a specified interval until the code is loaded or until the max number of attempts has been reached. The default `max` is `5` and the default `delay` is `500` (milliseconds).\n\n```ts\n/** Configuration for the number of reload attempts */\nexport type ReloadAttemptsConfig = { \n  /** Number of times the sandbox will try to reload before giving up */\n  max?: number;\n  /** Amount of time in milliseconds between each reload attempt */\n  delay?: number;\n};\n```\n\n## Component-level Overrides\n\nCode bubble is managed using a global configuration, but there may be times where specific instances need to behave differently. The following attributes can be added to the component to modify the behavior.\n\n| Attribute | Description |\n| --------- | ----------- |\n| `hide-preview` | Hides the preview display |\n| `hide-copy-code` | Hides the copy code button |\n| `hide-rtl` | Hides the RTL button |\n| `hide-sandbox` | Hides the sandbox button |\n| `hide-resize` | Hides the resize button |\n| `hide-frameworks` | Hides the framework buttons |\n| `hide-show-code` | Hides the show code button |\n| `open-show-code` | Opens the show code button |\n\n```html\n\u003ccode-bubble \n  hide-preview \n  hide-copy-code \n  hide-rtl \n  hide-sandbox\n  hide-resize\n  hide-frameworks\n  hide-show-code\n  open-show-code\n  \u003e\n\u003c/code-bubble\u003e\n```\n\n## Styling\n\nThe following CSS custom properties and parts are available to customize the appearance of the component.\n\n### CSS Custom Properties\n\n| CSS Property                                  | Description                                                            |\n| --------------------------------------------- | ---------------------------------------------------------------------- |\n| --code-bubble-border-color                    | The border color of the component and the controls                     |\n| --code-bubble-border-radius                   | The border radius of the component and the controls                    |\n| --code-bubble-border-width                    | The border width of the component and the controls                     |\n| --code-bubble-preview-padding                 | The padding of the rendered code example                               |\n| --code-bubble-snippet-padding                 | The padding for the example code                                       |\n| --code-bubble-button-font-weight              | The font weight for the controls                                       |\n| --code-bubble-button-icon-gap                 | The gap between the button text and icon                               |\n| --code-bubble-button-padding-x                | The horizontal padding for the controls at the bottom of the component |\n| --code-bubble-button-padding-y                | The vertical padding for the controls at the bottom of the component   |\n| --code-bubble-copy-button-font-weight         | The font weight for the copy code button                               |\n| --code-bubble-copy-button-padding-x           | The horizontal padding for the copy button                             |\n| --code-bubble-copy-button-padding-y           | The vertical padding for the copy button                               |\n| --code-bubble-outline                         | The outline style when elements have keyboard focus                    |\n| --code-bubble-outline-offset                  | The offset of the outline when an element has keyboard focus           |\n| --code-bubble-button-bg-color                 | The background color of the bottom controls                            |\n| --code-bubble-button-border-color             | The border color of the bottom controls                                |\n| --code-bubble-button-fg-color                 | The text color of the bottom controls                                  |\n| --code-bubble-copy-button-bg-color            | The background color of the copy code button                           |\n| --code-bubble-copy-button-border-color        | The border color of the copy code button                               |\n| --code-bubble-copy-button-fg-color            | The text color of the copy code button                                 |\n| --code-bubble-button-hover-bg-color           | The background color of the bottom controls on hover                   |\n| --code-bubble-button-hover-border-color       | The border color of the bottom controls on hover                       |\n| --code-bubble-button-hover-fg-color           | The text color of the bottom controls on hover                         |\n| --code-bubble-copy-button-hover-bg-color      | The background color of the copy code button on hover                  |\n| --code-bubble-copy-button-hover-border-color  | The border color of the copy code button on hover                      |\n| --code-bubble-copy-button-hover-fg-color      | The text color of the copy code button on hover                        |\n| --code-bubble-button-focus-bg-color           | The background color of the bottom controls on focus                   |\n| --code-bubble-button-focus-border-color       | The border color of the bottom controls on hover                       |\n| --code-bubble-button-focus-fg-color           | The text color of the bottom controls on hover                         |\n| --code-bubble-copy-button-focus-bg-color      | The background color of the copy code button on focus                  |\n| --code-bubble-copy-button-focus-border-color  | The border color of the copy code button on focus                      |\n| --code-bubble-copy-button-focus-fg-color      | The text color of the copy code button on focus                        |\n| --code-bubble-button-active-bg-color          | The background color of the bottom controls on active                  |\n| --code-bubble-button-active-border-color      | The border color of the bottom controls on active                      |\n| --code-bubble-button-active-fg-color          | The text color of the bottom controls on active                        |\n| --code-bubble-button-active-font-weight       | The font weight of the bottom controls on active                       |\n| --code-bubble-copy-button-active-bg-color     | The background color of the copy code button on active                 |\n| --code-bubble-copy-button-active-border-color | The border color of the copy code button on active                     |\n| --code-bubble-copy-button-active-fg-color     | The text color of the copy code button on active                       |\n\n### CSS Parts\n\n| CSS Part                | Description                                                        |\n| ----------------------- | ------------------------------------------------------------------ |\n| code-bubble-base        | The base wrapper for the internal component                        |\n| code-bubble-preview     | The element that wraps the rendered example                        |\n| code-bubble-code        | The element that wraps the source code section                     |\n| code-bubble-copy-button | The button used to copy code to the clipboard                      |\n| code-bubble-controls    | The element that wraps the controls at the bottom of the component |\n| code-bubble-control     | The buttons at the bottom of the component                         |\n| code-bubble-show-source | The \"show source\" button                                           |\n| code-bubble-framework   | The framework toggle buttons                                       |\n| code-bubble-rtl         | The \"RTL\" button                                                   |\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fbreak-stuff%2Fcode-bubble","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fbreak-stuff%2Fcode-bubble","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fbreak-stuff%2Fcode-bubble/lists"}