https://github.com/odinr/customelement-codeblock
webcomponent for displaying code
https://github.com/odinr/customelement-codeblock
Last synced: 4 months ago
JSON representation
webcomponent for displaying code
- Host: GitHub
- URL: https://github.com/odinr/customelement-codeblock
- Owner: odinr
- License: mit
- Created: 2018-05-03T06:56:32.000Z (about 7 years ago)
- Default Branch: master
- Last Pushed: 2018-05-11T00:12:44.000Z (about 7 years ago)
- Last Synced: 2025-01-11T11:43:49.924Z (5 months ago)
- Language: JavaScript
- Size: 999 KB
- Stars: 1
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: readme.md
- License: LICENSE
Awesome Lists containing this project
README
# Code Block
Plain vanilla CustomElement
**[demo](https://odinr.github.io/CustomElement-CodeBlock/)**
## Install
```
npm i @codin/html-codeblock
```
```javascript
// This package is precompiled with polyfills.
import "@codin/html-codeblock";
// If using with other CustomElements include the source.
import "@codin/html-codeblock/src";
// remember to handle css import
// example webpack.config
{
test: /\.(pcss)$/,
use: "text-loader" // or any raw loader or scss handler
}
```
## Prism
This webcomponent is build on **[PrismJs](http://prismjs.com/)**
Not the most optimal, since it doesn´t use modules, but good enough and lightweight. Hopefully in the future Prism will go over to modules so we can slim down this component
### Components
all componenets from prism are compatible, but they are not module based, so all components need to be required the old way with global scope.
```javascript
import {Prism} "@codin/html-codeblock/src/code-block";
require("prismjs/components/prism-markup-templating.js");
require("prismjs/components/prism-php.js");
```
### Plugins
Prism is ment to run in global window mode, so plugins are not recomended, but works...
```javascript
import {Prism} "@codin/html-codeblock/src/code-block";
require("prismjs/plugins/prism-custom-class");
```
## Styling
```css
--code-font: Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace;
--code-font-size: 1rem;
--code-font-height: 1.5;
--code-color: var(--theme-color, #3f3f3f);
--code-background: var(--theme-background, #f5f2f0);
--code-text-shadow: none;
/* general grouped colors */
--code-t-text: green;
--code-t-number: #905;
--code-t-selector: #690;
--code-t-operator: #9a6e3a;
--code-t-keyword: #07a;
--code-t-variable: #e90;
--code-t-function: #dd4a68;
--code-line-number-color: #999999;
--code-line-number-divider: 1px solid var(--code-line-number-color);
/* element colors */
--code-el-cdata: var(--code-t-text);
--code-el-comment: var(--code-t-text);
--code-el-doctype: var(--code-t-text);
--code-el-prolog: var(--code-t-text);
--code-el-namespace: var(--code-t-text);
--code-el-property: var(--code-t-number);
--code-el-tag: var(--code-t-number);
--code-el-boolean: var(--code-t-number);
--code-el-number: var(--code-t-number);
--code-el-constant: var(--code-t-number);
--code-el-symbol: var(--code-t-number);
--code-el-deleted: var(--code-t-number);
--code-el-selector: var(--code-t-selector);
--code-el-attr-name: var(--code-t-selector);
--code-el-string: var(--code-t-selector);
--code-el-char: var(--code-t-selector);
--code-el-builtin: var(--code-t-selector);
--code-el-inserted: var(--code-t-selector);
--code-el-operator: var(--code-t-operator);
--code-el-entity: var(--code-t-operator);
--code-el-url: var(--code-t-operator);
--code-el-atrule: var(--code-t-keyword);
--code-el-attr-value: var(--code-t-keyword);
--code-el-keyword: var(--code-t-keyword);
--code-el-regex: var(--code-t-variable);
--code-el-important: var(--code-t-variable);
--code-el-variable: var(--code-t-variable);
--code-el-function: var(--code-t-function);
--code-el-class-name: var(--code-t-function);
--code-el-punctuation: #999999;
```
Themes are not included in the package to keep it lightweight, below an example of importing predefined themes to document
```javascript
import style_light from "@codin/html-codeblock/src/theme/light.pcss";
import style_dark from "@codin/html-codeblock/src/theme/dark.pcss";
import style_c64 from "@codin/html-codeblock/src/theme/c64.pcss";
const css = `
codin-codeblock.light{${style_light}}
codin-codeblock.dark{${style_dark}}
codin-codeblock.c64{${style_c64}}
`;
const head = document.head || document.getElementsByTagName('head')[0];
const style = document.createElement('style');
style.type = "text/css";
if (style.styleSheet){
style.styleSheet.cssText = css;
} else {
style.appendChild(document.createTextNode(css));
}
head.appendChild(style);
```
@todo
- esLint
- document code
- **Events**
- onFileLoad
- onFileLoaded
- onContentParse
- onContentParsed
- **Observers**
- customElement.innerHtml