├── .github └── workflows │ └── npm-publish.yml ├── .gitignore ├── .nojekyll ├── .npmignore ├── README.md ├── _sidebar.md ├── cspell.json ├── docs ├── README.md ├── _sidebar.md └── index.html ├── index.html ├── package-lock.json ├── package.json ├── postcss.config.js ├── project-words.txt ├── src ├── code-line-block.ts ├── container-block.ts ├── copy-code.ts ├── index.css ├── line-parser.ts ├── main.ts ├── types.d.ts └── vite-env.d.ts ├── tailwind.config.js ├── tsconfig.json └── vite.config.js /.github/workflows/npm-publish.yml: -------------------------------------------------------------------------------- 1 | # This workflow will run tests using node and then publish a package to GitHub Packages when a release is created 2 | # For more information see: https://docs.github.com/en/actions/publishing-packages/publishing-nodejs-packages 3 | 4 | name: Node.js Package 5 | 6 | on: 7 | release: 8 | types: [created] 9 | 10 | jobs: 11 | test: 12 | runs-on: ubuntu-latest 13 | steps: 14 | - uses: actions/checkout@v3 15 | - uses: actions/setup-node@v3 16 | with: 17 | node-version: 16 18 | - run: npm ci 19 | - run: npm run cspell 20 | - run: npm run prettier 21 | 22 | build: 23 | runs-on: ubuntu-latest 24 | steps: 25 | - uses: actions/checkout@v3 26 | - uses: actions/setup-node@v3 27 | with: 28 | node-version: 16 29 | - run: npm ci 30 | - run: npm run build 31 | 32 | publish-npm: 33 | needs: build 34 | runs-on: ubuntu-latest 35 | steps: 36 | - uses: actions/checkout@v3 37 | - uses: actions/setup-node@v3 38 | with: 39 | node-version: 16 40 | registry-url: https://registry.npmjs.org/ 41 | - run: npm ci 42 | - run: npm publish 43 | env: 44 | NODE_AUTH_TOKEN: ${{secrets.npm_token}} 45 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | # Logs 2 | logs 3 | *.log 4 | npm-debug.log* 5 | yarn-debug.log* 6 | yarn-error.log* 7 | pnpm-debug.log* 8 | lerna-debug.log* 9 | 10 | node_modules 11 | dist 12 | dist-ssr 13 | *.local 14 | 15 | # Editor directories and files 16 | .vscode/* 17 | !.vscode/extensions.json 18 | .idea 19 | .DS_Store 20 | *.suo 21 | *.ntvs* 22 | *.njsproj 23 | *.sln 24 | *.sw? 25 | -------------------------------------------------------------------------------- /.nojekyll: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/dolanmiu/docsify-terminal-block/97c1e326966888728a61d5136ad64c41230932e4/.nojekyll -------------------------------------------------------------------------------- /.npmignore: -------------------------------------------------------------------------------- 1 | # Logs 2 | logs 3 | *.log 4 | npm-debug.log* 5 | 6 | # Runtime data 7 | pids 8 | *.pid 9 | *.seed 10 | 11 | # Directory for instrumented libs generated by jscoverage/JSCover 12 | lib-cov 13 | 14 | # Coverage directory used by tools like istanbul 15 | coverage 16 | 17 | # Grunt intermediate storage (http://gruntjs.com/creating-plugins#storing-task-files) 18 | .grunt 19 | 20 | # node-waf configuration 21 | .lock-wscript 22 | 23 | # Compiled binary addons (http://nodejs.org/api/addons.html) 24 | build/Release 25 | 26 | # Dependency directory 27 | node_modules 28 | 29 | # Optional npm cache directory 30 | .npm 31 | 32 | # Optional REPL history 33 | .node_repl_history 34 | 35 | # build 36 | # build <-- we want this in the package 37 | build-tests 38 | 39 | # vscode 40 | .vscode 41 | 42 | # docs 43 | docs 44 | 45 | # src 46 | src 47 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # docsify-terminal-block 🖥️ 2 | 3 | [](https://www.jsdelivr.com/package/npm/docsify-terminal-block) 4 | 5 | A docsify plugin to add pretty terminal blocks to your docs. It has `Copy to Clipboard` functionality too. 6 | 7 | ## Screenshots 8 | 9 |  10 | 11 | ## Installation 12 | 13 | Add the docsify-terminal-block plugin to your index.html after docsify. The plugin is available on jsdelivr (below), unpkg, and other CDN services that auto-publish npm packages. 14 | 15 | ```html 16 | 17 | ``` 18 | 19 | ## Usage 20 | 21 | Add the `terminal` tag to your markdown file to create a terminal block. 22 | 23 | ```` 24 | 25 | ```terminal 26 | npm run start 27 | ``` 28 | ```` 29 | 30 | You can add prefixes to the terminal block to change the style of the line. For example adding `$` or `>`: 31 | 32 | ```` 33 | 34 | ```terminal 35 | $|npm run start 36 | >|npm run start 37 | ``` 38 | ```` 39 | 40 | You can make the line a warning, info, error, or success by adding `warning`, `info`, `error`, or `success` after the prefix: 41 | 42 | ```` 43 | 44 | ```terminal 45 | $|warning|npm run build 46 | >|info|npm run start 47 | >|error|npm run start 48 | >|success|npm run start 49 | ``` 50 | ```` 51 | 52 | ## Example 53 | 54 | ```` 55 | 56 | ```terminal 57 | npm run start 58 | $|npm run start 59 | $|warning|npm run build 60 | >|info|npm run start 61 | |... 62 | >|error|npm run start 63 | >|success|npm run start 64 | 65 | warning|npm run build 66 | ``` 67 | ```` 68 | 69 | --- 70 | 71 | Made with ❤️ 72 | -------------------------------------------------------------------------------- /_sidebar.md: -------------------------------------------------------------------------------- 1 | 2 | 3 | - Getting started 4 | 5 | - [Example](docs/example.md) 6 | -------------------------------------------------------------------------------- /cspell.json: -------------------------------------------------------------------------------- 1 | { 2 | "$schema": "https://raw.githubusercontent.com/streetsidesoftware/cspell/main/cspell.schema.json", 3 | "version": "0.2", 4 | "dictionaryDefinitions": [ 5 | { 6 | "name": "project-words", 7 | "path": "./project-words.txt", 8 | "addWords": true 9 | } 10 | ], 11 | "dictionaries": ["project-words"], 12 | "ignorePaths": ["node_modules", "/project-words.txt", "dist"], 13 | "language": "en", 14 | "languageSettings": [ 15 | { 16 | "languageId": "typescript", 17 | "dictionaries": ["typescript", "project-words"] 18 | }, 19 | { 20 | "languageId": "javascript", 21 | "dictionaries": ["javascript", "project-words"] 22 | } 23 | ] 24 | } 25 | -------------------------------------------------------------------------------- /docs/README.md: -------------------------------------------------------------------------------- 1 | ## Example page 2 | 3 | 4 | 5 | ```terminal 6 | npm run start 7 | $|npm run start 8 | $|warning|npm run build 9 | >|info|npm run start 10 | |... 11 | >|error|npm run start 12 | >|success|npm run start 13 | 14 | warning|npm run build 15 | ``` 16 | 17 | ```bash 18 | $ npm run start 19 | $ npm run build 20 | ``` 21 | 22 | Lorem ipsum dolor sit amet, _consectetur_ adipisicing elit, sed do eiusmod 23 | tempor incididunt ut **labore et dolore magna aliqua**. Ut enim ad minim veniam, 24 | quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo 25 | consequat. **_Duis aute irure dolor_** in reprehenderit in voluptate velit esse 26 | cillum dolore eu fugiat nulla pariatur. ~~Excepteur sint occaecat~~ cupidatat non 27 | proident, sunt in culpa qui officia deserunt mollit anim id est laborum. 28 | 29 | ## H2 30 | 31 | Lorem ipsum dolor sit amet, _consectetur_ adipisicing elit, sed do eiusmod 32 | tempor incididunt ut **labore et dolore magna aliqua**. Ut enim ad minim veniam, 33 | quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo 34 | consequat. 35 | 36 | --- 37 | 38 | **_Duis aute irure dolor_** in reprehenderit in voluptate velit esse 39 | cillum dolore eu fugiat nulla pariatur. ~~Excepteur sint occaecat~~ cupidatat non 40 | proident, sunt in culpa qui officia deserunt mollit anim id est laborum. 41 | 42 | 43 | 44 | ### H3 45 | 46 | unordered list: 47 | 48 | - item-1 49 | - sub-item-1 50 | - sub-item-2 51 | 52 | * item-2 53 | - sub-item-3 54 | - sub-item-4 55 | 56 | - item-3 57 | - sub-item-5 58 | - sub-item-6 59 | 60 | ordered list: 61 | 62 | 1. item-1 63 | 1. sub-item-1 64 | 2. sub-item-2 65 | 2. item-2 66 | 1. sub-item-3 67 | 2. sub-item-4 68 | 3. item-3 69 | 70 | #### Header4 71 | 72 | | Table Header-1 | Table Header-2 | Table Header-3 | 73 | | :------------- | :------------: | -------------: | 74 | | Table Data-1 | Table Data-2 | Table Data-3 | 75 | | TD-4 | Td-5 | TD-6 | 76 | | Table Data-7 | Table Data-8 | Table Data-9 | 77 | 78 | ##### Header5 79 | 80 | You may also want some images right in here like  - you can do that but I would recommend you to use the component "image" and simply split your text. 81 | -------------------------------------------------------------------------------- /docs/_sidebar.md: -------------------------------------------------------------------------------- 1 | 2 | 3 | - Getting started 4 | 5 | - [Example](docs/example.md) 6 | -------------------------------------------------------------------------------- /docs/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 |
4 | 5 |$|npm run start $|npm run build
7 | const lineBlocks = lines.map((line) => {
8 | const lineBlock = document.createElement("pre");
9 | lineBlock.setAttribute("v-pre", "");
10 | lineBlock.setAttribute("data-lang", "");
11 | if (line.prefix) {
12 | lineBlock.setAttribute("data-prefix", line.prefix);
13 | }
14 | lineBlock.setAttribute(
15 | "style",
16 | "background-color: transparent; padding: 0; margin: 0; display: flex;"
17 | );
18 |
19 | const codeBlock = document.createElement("code");
20 | codeBlock.setAttribute("class", "lang-terminal"); // Or lang-bash
21 | codeBlock.classList.add("lang-terminal");
22 | codeBlock.setAttribute(
23 | "style",
24 | "background-color: transparent !important; padding: 0; margin: 0;"
25 | );
26 |
27 | switch (line.type) {
28 | case "info":
29 | lineBlock.classList.add("!dtb-bg-info", "!dtb-text-info-content");
30 | codeBlock.classList.add("!dtb-text-warning-content", "dtb-opacity-80");
31 | break;
32 | case "error":
33 | lineBlock.classList.add("!dtb-bg-error", "!dtb-text-error-content");
34 | codeBlock.classList.add("!dtb-text-error-content", "dtb-opacity-80");
35 | break;
36 | case "success":
37 | lineBlock.classList.add("!dtb-bg-success", "!dtb-text-success-content");
38 | codeBlock.classList.add("!dtb-text-success-content", "dtb-opacity-80");
39 | break;
40 | case "warning":
41 | lineBlock.classList.add("!dtb-bg-warning", "!dtb-text-warning-content");
42 | codeBlock.classList.add("!dtb-text-warning-content", "dtb-opacity-80");
43 | break;
44 | default:
45 | codeBlock.classList.add("!dtb-text-white");
46 | break;
47 | }
48 |
49 | codeBlock.textContent = line.text;
50 | lineBlock.appendChild(codeBlock);
51 | return lineBlock;
52 | });
53 |
54 | return lineBlocks;
55 | };
56 |
--------------------------------------------------------------------------------
/src/container-block.ts:
--------------------------------------------------------------------------------
1 | export const createContainerBlock = (elements: HTMLElement[]) => {
2 | //