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
}