Skip to content
This repository was archived by the owner on May 3, 2026. It is now read-only.

Commit 999e941

Browse files
KolesnikovKirillKolesnikovKirill
committed
Initial release setup
0 parents  commit 999e941

20 files changed

Lines changed: 6475 additions & 0 deletions

‎.github/workflows/ci.yml‎

Lines changed: 33 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,33 @@
1+
name: CI
2+
3+
on:
4+
push:
5+
branches:
6+
- main
7+
pull_request:
8+
9+
jobs:
10+
test:
11+
runs-on: ubuntu-latest
12+
13+
steps:
14+
- name: Checkout
15+
uses: actions/checkout@v4
16+
17+
- name: Setup Node.js
18+
uses: actions/setup-node@v4
19+
with:
20+
node-version: 20
21+
cache: npm
22+
23+
- name: Install dependencies
24+
run: npm ci
25+
26+
- name: Typecheck
27+
run: npm run typecheck
28+
29+
- name: Run tests
30+
run: npm test
31+
32+
- name: Build package
33+
run: npm run build

‎.github/workflows/publish.yml‎

Lines changed: 63 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,63 @@
1+
name: Publish
2+
3+
on:
4+
push:
5+
tags:
6+
- "v*"
7+
8+
jobs:
9+
publish:
10+
runs-on: ubuntu-latest
11+
12+
permissions:
13+
contents: write
14+
15+
steps:
16+
- name: Checkout
17+
uses: actions/checkout@v4
18+
19+
- name: Setup Node.js
20+
uses: actions/setup-node@v4
21+
with:
22+
node-version: 20
23+
registry-url: https://registry.npmjs.org
24+
cache: npm
25+
26+
- name: Install dependencies
27+
run: npm ci
28+
29+
- name: Typecheck
30+
run: npm run typecheck
31+
32+
- name: Run tests
33+
run: npm test
34+
35+
- name: Build package
36+
run: npm run build
37+
38+
- name: Publish to npm
39+
run: npm publish
40+
env:
41+
NODE_AUTH_TOKEN: ${{ secrets.NPM_TOKEN }}
42+
43+
- name: Extract release notes from changelog
44+
id: changelog
45+
run: |
46+
VERSION="${GITHUB_REF_NAME#v}"
47+
awk -v version="$VERSION" '
48+
$0 ~ "^## \\[" version "\\]" { capture=1; next }
49+
capture && $0 ~ "^## \\[" { exit }
50+
capture { print }
51+
' CHANGELOG.md | sed '/./,$!d' > release-notes.md
52+
53+
if [ ! -s release-notes.md ]; then
54+
echo "No changelog entry found for version ${VERSION}" >&2
55+
exit 1
56+
fi
57+
58+
- name: Create GitHub release
59+
uses: softprops/action-gh-release@v2
60+
with:
61+
tag_name: ${{ github.ref_name }}
62+
name: ${{ github.ref_name }}
63+
body_path: release-notes.md

‎.gitignore‎

Lines changed: 11 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,11 @@
1+
node_modules
2+
dist
3+
.DS_Store
4+
5+
.env
6+
.env.*
7+
!.env.example
8+
9+
coverage
10+
.vite
11+
*.tsbuildinfo

‎.prettierignore‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,2 @@
1+
dist
2+
node_modules

‎CHANGELOG.md‎

Lines changed: 20 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,20 @@
1+
# Changelog
2+
3+
All notable changes to this project will be documented in this file.
4+
5+
The format is based on Keep a Changelog, and this project adheres to Semantic Versioning.
6+
7+
## [1.0.0] - 2026-03-01
8+
9+
### Added
10+
11+
- Initial stable release of `@codemonster-ru/vue-codeblock`
12+
- Vue 3 code block component with copy action, line numbers, theming, and syntax highlighting
13+
- Shared runtime exports for `highlightCodeBlock`, `highlightCodeLine`, and `escapeCodeHtml`
14+
- GitHub Actions CI workflow for install, typecheck, test, and build
15+
- GitHub Actions publish workflow for npm releases triggered by `v*` tags
16+
17+
### Changed
18+
19+
- Finalized public package metadata and exports for npm publishing
20+
- Cleaned published type artifacts so demo declarations are no longer included in the package

‎LICENSE‎

Lines changed: 21 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,21 @@
1+
MIT License
2+
3+
Copyright (c) 2026-present Kirill Kolesnikov
4+
5+
Permission is hereby granted, free of charge, to any person obtaining a copy
6+
of this software and associated documentation files (the "Software"), to deal
7+
in the Software without restriction, including without limitation the rights
8+
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
9+
copies of the Software, and to permit persons to whom the Software is
10+
furnished to do so, subject to the following conditions:
11+
12+
The above copyright notice and this permission notice shall be included in all
13+
copies or substantial portions of the Software.
14+
15+
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16+
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17+
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18+
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19+
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20+
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
21+
SOFTWARE.

‎README.md‎

Lines changed: 150 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,150 @@
1+
# @codemonster-ru/vue-codeblock
2+
3+
[![npm version](https://img.shields.io/npm/v/%40codemonster-ru%2Fvue-codeblock)](https://www.npmjs.com/package/@codemonster-ru/vue-codeblock)
4+
[![npm downloads](https://img.shields.io/npm/dw/%40codemonster-ru%2Fvue-codeblock)](https://www.npmjs.com/package/@codemonster-ru/vue-codeblock)
5+
[![license](https://img.shields.io/npm/l/%40codemonster-ru%2Fvue-codeblock)](https://github.com/codemonster-ru/vue-codeblock/blob/main/LICENSE)
6+
7+
Standalone Vue 3 code block component with built-in syntax highlighting, light/dark theme support, copy actions, line numbers, and a small shared highlighting runtime you can also use outside the component.
8+
9+
## Install
10+
11+
```bash
12+
npm i @codemonster-ru/vue-codeblock
13+
```
14+
15+
## Use Cases
16+
17+
- package documentation
18+
- design system docs
19+
- internal developer portals
20+
- settings/admin panels that need to render code examples
21+
22+
## Component Usage
23+
24+
Register the plugin:
25+
26+
```ts
27+
import { createApp } from "vue";
28+
import App from "./App.vue";
29+
import VueCodeBlock from "@codemonster-ru/vue-codeblock";
30+
31+
createApp(App).use(VueCodeBlock).mount("#app");
32+
```
33+
34+
Or import the component directly:
35+
36+
```vue
37+
<script setup lang="ts">
38+
import { CodeBlock } from "@codemonster-ru/vue-codeblock";
39+
</script>
40+
41+
<template>
42+
<CodeBlock
43+
language="vue"
44+
filename="ButtonExample.vue"
45+
:show-line-numbers="true"
46+
:code="`<Button label=&quot;Save&quot; />`"
47+
/>
48+
</template>
49+
```
50+
51+
If you want the package CSS explicitly:
52+
53+
```ts
54+
import "@codemonster-ru/vue-codeblock/style.css";
55+
```
56+
57+
## Runtime Usage
58+
59+
The package also exports the shared highlighter:
60+
61+
```ts
62+
import {
63+
highlightCodeBlock,
64+
escapeCodeHtml,
65+
} from "@codemonster-ru/vue-codeblock";
66+
67+
const html = highlightCodeBlock("ts", "const answer = 42;");
68+
const escaped = escapeCodeHtml("<Button />");
69+
```
70+
71+
## Props
72+
73+
| Prop | Type | Default | Purpose |
74+
| ----------------- | -------------------------------- | -------------- | ------------------------------------ |
75+
| `code` | `string` | `''` | Raw source code |
76+
| `language` | `CodeBlockLanguage` | `'plaintext'` | Language hint for highlighting |
77+
| `filename` | `string` | `''` | Optional filename in header |
78+
| `showHeader` | `boolean` | `true` | Shows the top meta/action bar |
79+
| `showLineNumbers` | `boolean` | `false` | Renders line numbers |
80+
| `copyable` | `boolean` | `true` | Shows copy action |
81+
| `copyLabel` | `string` | `'Copy'` | Copy button text |
82+
| `copiedLabel` | `string` | `'Copied'` | Temporary copied state label |
83+
| `copiedDuration` | `number` | `1200` | Copied state timeout in ms |
84+
| `languageLabel` | `string` | `'Language'` | Header label before language |
85+
| `disabled` | `boolean` | `false` | Disables actions |
86+
| `wrap` | `boolean` | `false` | Enables wrapped lines |
87+
| `highlight` | `boolean` | `true` | Turns highlighting on/off |
88+
| `maxHeight` | `string` | `''` | Optional scroll container max height |
89+
| `ariaLabel` | `string` | `'Code block'` | Accessibility label |
90+
| `theme` | `'inherit' \| 'light' \| 'dark'` | `'inherit'` | Theme mode override |
91+
92+
## Events
93+
94+
| Event | Payload |
95+
| ------ | ------------------ |
96+
| `copy` | `{ text: string }` |
97+
98+
## Slots
99+
100+
| Slot | Purpose |
101+
| --------- | ------------------------------------------ |
102+
| `actions` | Add custom actions next to the copy button |
103+
104+
## Supported Languages
105+
106+
Canonical built-in values:
107+
108+
`plaintext`, `text`, `txt`, `js`, `javascript`, `ts`, `typescript`, `vue`, `html`, `json`, `bash`, `shell`, `sh`, `css`, `scss`, `sass`
109+
110+
You can import them as `SUPPORTED_CODE_BLOCK_LANGUAGES`.
111+
112+
## Theming
113+
114+
The component ships with light and dark defaults. You can override it with:
115+
116+
- `theme="light"`
117+
- `theme="dark"`
118+
- `theme="inherit"` and an ancestor `data-theme="dark"`
119+
120+
Main CSS custom properties:
121+
122+
- `--vcb-background-color`
123+
- `--vcb-text-color`
124+
- `--vcb-border-color`
125+
- `--vcb-padding`
126+
- `--vcb-font-size`
127+
- `--vcb-line-height`
128+
- `--vcb-token-keyword-color`
129+
- `--vcb-token-string-color`
130+
- `--vcb-token-number-color`
131+
- `--vcb-token-variable-color`
132+
- `--vcb-token-function-color`
133+
- `--vcb-token-property-color`
134+
- `--vcb-token-directive-color`
135+
136+
Example:
137+
138+
```css
139+
.docs-surface {
140+
--vcb-background-color: #081224;
141+
--vcb-border-color: rgba(96, 165, 250, 0.28);
142+
--vcb-token-keyword-color: #d8b4fe;
143+
}
144+
```
145+
146+
## Notes
147+
148+
- The built-in highlighter is lightweight and regex-based by design.
149+
- It is tuned for documentation and UI examples, not for full IDE-grade parsing.
150+
- If you need more languages later, extend the highlighter runtime rather than patching rendered HTML.

‎index.html‎

Lines changed: 17 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,17 @@
1+
<!doctype html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8" />
5+
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
6+
<title>Vue Code Block Demo</title>
7+
<style>
8+
body {
9+
margin: 0;
10+
}
11+
</style>
12+
</head>
13+
<body>
14+
<div id="app"></div>
15+
<script type="module" src="/src/demo/main.ts"></script>
16+
</body>
17+
</html>

0 commit comments

Comments
 (0)