Draw Code Snippets On Canvas To Improve Readability – Code Viewer

Preview:

Description:

Code Viewer is a vanilla JavaScript library for showcasing code snippets with syntax highlighting and custom styling on an HTML5 canvas element.

It uses highlight.js to provide out-of-the-box support for syntax highlighting of multiple languages, including JavaScript, Python, Java, C++, and more.

Code Viewer can help demonstrate code examples in tutorials, documentation, blogs, and more. It improves code readability and makes it easier for developers to quickly grasp snippets.

How to use it:

1. Import the necessary Code Viewer and Highlight.js

# Code Viewer
npm i @humandetail/code-viewer
# highlight.js
npm i highlight.js

2. Import the Code Viewer into your project.

import { CodeViewer } from '@humandetail/code-viewer'

3. Create a new instance of CodeViewer and insert your code snippets into the content parameter:

const instance = new CodeViewer({
      content: 'Code Snippets Here',
      language: 'Specify the language here'
})

4. Render your code snippets on a canvas.

instance.mount(document.querySelector('#element'))
.render()

5. Available options.

color: '#24292e',
backgroundColor: '#f6f6f6',
fontSize: 16,
lineHeight: 22,
fontWeight: 'normal',
fontStyle: 'normal',
fontFamily: 'monospace, Courier New, Menlo, Monaco',
textAlign: 'left',
textBaseLine: 'middle',
opacity: 1,
borderWidth: 1,
borderColor: '#333',
borderStyle: 'solid',
borderRadius: 4,
padding: [16, 16, 16, 16]