Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/annoraaq/codepled
A new type of media for coding tutorials. Combine the advantages of tutorial videos with those of blog posts.
https://github.com/annoraaq/codepled
video-tutorials
Last synced: 2 days ago
JSON representation
A new type of media for coding tutorials. Combine the advantages of tutorial videos with those of blog posts.
- Host: GitHub
- URL: https://github.com/annoraaq/codepled
- Owner: Annoraaq
- Created: 2020-09-02T16:00:46.000Z (over 4 years ago)
- Default Branch: master
- Last Pushed: 2020-12-28T16:00:51.000Z (almost 4 years ago)
- Last Synced: 2024-10-27T23:40:11.636Z (about 2 months ago)
- Topics: video-tutorials
- Language: TypeScript
- Homepage:
- Size: 18.5 MB
- Stars: 4
- Watchers: 2
- Forks: 0
- Open Issues: 5
-
Metadata Files:
- Readme: README.md
- Funding: .github/FUNDING.yml
Awesome Lists containing this project
README
# Codepled
## A new type of media for coding tutorials.
### Combine the advantages of tutorial videos with those of blog posts.
### Have the code side by side with the explanations and see it change in real time:
---
### **Navigate** as if you were watching a video.
---
### But **copy and paste** code.
## How to use
For complete examples check out the [examples](https://github.com/Annoraaq/codepled/tree/master/examples) section.
### Include Codepled
To use the codepled editor you need to insert `codepled.min.js` and `codepled.min.css` and provide a container element that we give the id `my-codepled`:
```html
...
...
```
### Initialize Player
To initialize the player we need to create an instance of the PlayerUi and provide the selector of our container element. Afterwards we initialize the player instance with our commands (the content) and a title.
```html
const commands = ...;
const player = new Codepled.PlayerUi("#my-codepled");
player.init(
commands,
"Title of My Codepled"
);
```
## Structure of the Commands Array
The player takes an array of commands. Each command is itself an array with two elements: `[type, payload]`. The following commands are supported:
### `DELETE`
Deletes `numberOfChars` characters from the current cursor position.
Payload:
```Typescript
numberOfChars: number
```
### `INSERT`
Inserts `strToInsert` at the current cursor position.
Payload:
```Typescript
strToInsert: string
```
### `SKIP`
Moves the cursor `numberOfChars` characters forward.
Payload:
```Typescript
numberOfChars: number
```
### `SHOW_TEXT`
Payload:
```Typescript
{
message: string,
title?: string,
level?: number = 1,
toc?: boolean = true,
pause?: boolean = false
}
```
Shows `message` in the text window. If `toc` is true, it will be shown in the table of contents. If a `title` is provided, it will be used in the table of contents. If no `title` is provided, it will generate one, based on the first characters of `message`. `level` can be `1` or `2` and defines the level in the table of contents. If `pause` is set to `true` the plater will be paused after showing the `message`.
### `HIGHLIGHT_LINES`
Highlights code lines from `start` till `end` starting at index `1`;
Payload:
```Typescript
{
start: number,
end: number
}
```
### `SCROLL_TO`
Scrolls to `line`.
Payload:
```Typescript
line: number
```
### `SET_CURSOR`
Sets cursor to `position`.
Payload:
```Typescript
position: number
```
### `PAUSE`
Pauses the player.
Payload: none
### `REPLACE_ALL`
Replaces the whole content of the code window with `newContent`.
Payload:
```Typescript
newContent: string
```
### `CREATE_DIFF`
Creates a set of `INSERT`, `DELETE` and `SKIP` commands that transform `source` into `target`.
Payload:
```Typescript
{
source: string,
target: string
}
```