<code-block>

This webcomponent follows the open-wc recommendation.

Description

Web component that formats text to appear in a box similar to a code block in markdown, with optional copy functionality.

• NPM
• GitHub

---

Getting Started

Installation

npm i @htmlplusplus/code-block

Import

HTML

<!-- Import into HTML -->
<script type="module">
  import '@htmlplusplus/code-block/code-block.js';
</script>

<!-- OR -->
<script type="module" src="@htmlplusplus/code-block/code-block.js"></script>

<!-- Place the below tag into your HTML -->
<code-block></code-block>

JavaScript / TypeScript

// import into an existing JS module / web component
import '@htmlplusplus/code-block/code-block.js';

---

Usage

Attributes

<!-- Will enable a "Copy" button on the right side of the component, 
 which will copy component contents to clipboard -->
<code-block allow-copy></code-block>

<!-- Border will be white instead of gray -->
<code-block dark-mode></code-block>

---

Tooling configs

For most of the tools, the configuration is in the package.json to reduce the amount of files in your project.

If you customize the configuration a lot, you can consider moving them to individual files.

---

Local Demo with web-dev-server

npm start

To run a local development server that serves the basic demo located in demo/index.html