https://github.com/janole/embed-code

A tiny component to render code with highlight.js inside of a terminal-like window.
https://github.com/janole/embed-code

code javascript javascript-library npm

Last synced: 26 days ago
JSON representation

A tiny component to render code with highlight.js inside of a terminal-like window.

• Host: GitHub
• URL: https://github.com/janole/embed-code
• Owner: janole
• License: mit
• Created: 2020-09-13T20:39:17.000Z (over 4 years ago)
• Default Branch: master
• Last Pushed: 2020-12-14T15:38:40.000Z (about 4 years ago)
• Last Synced: 2024-11-21T11:19:49.584Z (about 2 months ago)
• Topics: code, javascript, javascript-library, npm
• Language: JavaScript
• Homepage:
• Size: 316 KB
• Stars: 0
• Watchers: 2
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# embed-code

A tiny component to render code with [highlight.js](https://highlightjs.org/) inside of a terminal-like window.

![How to embed the code](doc/screenshot-1.png)

## HOWTO

There are basically two ways of embedding the code. Both options will be using a simple JavaScript that is going to replace itself with the rendered code inside of a nice looking terminal window.

### 1. Plain text inside of the script tag 

```html

function Welcome(props)

{

    return <h1>Hello, {props.name}</h1>;

}

```

### 2. JSON encoded data inside of the script tag 

```html

{"lang": "js", "code": "function Welcome(props)\n{\n    return <h1>Hello, {props.name}<\/h1>;\n}"}

```

The result will be looking like this:

![The embedded code](doc/screenshot-2.png)

## CDN

The latest `embed-code.js` is available from unpkg.com:

```diff

https://unpkg.com/embed-code@latest/embed-code.js

```

## WHY

I want to use this component in a Wordpress blog that's going to be filled from a github repository with markdown posts ...