For complete examples check out the examples section.

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:

<link rel="stylesheet" href="../codepled.min.css" />
...
<script src="../codepled.min.js"></script>
...
<div id="my-codepled"></div>

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.

<script>
  const commands = ...;
  const player = new Codepled.PlayerUi("#my-codepled");
  player.init(
    commands,
    "Title of My Codepled"
  );
</script>

The player takes an array of commands. Each command is itself an array with two elements: [type, payload]. The following commands are supported:

Deletes numberOfChars characters from the current cursor position.

Payload:

numberOfChars: number

Inserts strToInsert at the current cursor position.

Payload:

strToInsert: string

Moves the cursor numberOfChars characters forward.

Payload:

numberOfChars: number

Payload:

{
  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.

Highlights code lines from start till end starting at index 1;

Payload:

{
  start: number,
  end: number
}

Scrolls to line.

Payload:

line: number

Sets cursor to position.

Payload:

position: number

Pauses the player.

Payload: none

Replaces the whole content of the code window with newContent.

Payload:

newContent: string

Creates a set of INSERT, DELETE and SKIP commands that transform source into target.

Payload:

{
  source: string,
  target: string
}