@humandetail/code-viewer
v0.2.0
Published
Display your code with Canvas Rendering.
Downloads
31
Maintainers
Readme
Code Viewer
This is a library that utilizes Canvas to showcase code snippets, allowing you to visually display your code on web pages in an engaging way.
English | 简体中文
Features
Utilizes Canvas technology to draw code snippets, supporting custom styles and colors.
Supports syntax highlighting for improved code readability.
Can be embedded into your web page using a simple API.
Playground
Here's a playground.
Installation
# add code-viewer
npm i @humandetail/code-viewer
# add highlight.js
npm i highlight.js
Usage
import { CodeViewer } from '@humandetail/code-viewer'
const cv = new CodeViewer({
content: 'Your code string.',
language: 'language'
})
cv.mount(document.querySelector('#container'))
.render()
Options
new CodeViewer(options?: ViewerOptions, theme?: CodeViewerTheme)
ViewerOptions
|Property|Description|Type|Default|
|-|-|-|-|
|content|The code string|string|''|
|language|Language of the code|string|'PlainText'|
|width|-|number|0|
|height|-|number|0|
|themeMode|Theme of the code viewer|'light' | 'dark'|'light'|
|displayLineNumber|Whether the line number is display|boolean|false|
|breakRow|Whether break the row if overflow|boolean|false|
|overflowX|If overflowX is auto
and breakRow is false. The canvas width will follow the maximum width of the row. If overflowX is scroll
and breakRow is false. A horizontal scroll bar will be displayed.|'auto' | 'scroll' | 'hidden'|'auto'|
|overflowY|-|'auto' | 'scroll' | 'hidden'|'auto'|
|headerBarSetting|-|{ visible?: boolean, displayLanguage?: boolean, collapsible?: boolean, copyable?: boolean }|visible: false, displayLanguage: false, collapsible: false, copyable: false|
|isCollapsed|-|boolean|false|
CodeViewerTheme
If you want to customize the theme, check out the type declaration file.
API
setTheme(theme: CodeViewerTheme, themeMode?: 'light' | 'dark'): CodeViewer
reset(options?: ViewerOptions, them?: CodeViewerTheme): void
update(content?: string, language?: string, resetScroll?: boolean): void
render(): CodeViewer
resize(width: number, height: number): void
mount(el: string | Element): CodeViewer
unmount(): void
Contributing
If you encounter any issues or wish to improve this library, feel free to submit issues and pull requests. Your contributions will be greatly appreciated!
LICENSE
This project is licensed under the MIT License.