Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/liatemplates/liveedit-embeddings
Insert examples with the LiaScript LiveEditor
https://github.com/liatemplates/liveedit-embeddings
liascript liascript-template markdown markdown-editor oer
Last synced: 13 days ago
JSON representation
Insert examples with the LiaScript LiveEditor
- Host: GitHub
- URL: https://github.com/liatemplates/liveedit-embeddings
- Owner: LiaTemplates
- License: cc0-1.0
- Created: 2024-11-04T12:07:58.000Z (13 days ago)
- Default Branch: main
- Last Pushed: 2024-11-04T13:57:04.000Z (13 days ago)
- Last Synced: 2024-11-04T14:41:33.505Z (13 days ago)
- Topics: liascript, liascript-template, markdown, markdown-editor, oer
- Homepage: https://liascript.github.io/course/?https://raw.githubusercontent.com/LiaTemplates/LiveEdit-Embeddings/refs/heads/main/README.md
- Size: 2.93 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# LiveEdit-Embeddings
--{{0}}--
Insert examples with the LiaScript LiveEditor. This allows you to create interactive code examples that can be edited and executed directly in the browser.
--{{1}}--
Explore the following resources for more information and documentation:
{{0-1}}
* See the GitHub version of this document
[here...](https://github.com/LiaTemplates/LiveEdit-Embeddings)
* See the LiaScript version of this document
[here...](https://liascript.github.io/course/?https://raw.githubusercontent.com/LiaTemplates/LiveEdit-Embeddings/refs/heads/main/README.md)
There are three ways to use this template.
The most straightforward approach is to use the `import` statement with the URL of the raw text-file from the master branch or any other specific branch/version.
Alternatively, you can directly copy the necessary code into the header of your Markdown document, as detailed on the [last slide](#implementation).
Finally, you can clone this project and customize it according to your needs.
{{2}}
1. Load the macros via
`import: https://raw.githubusercontent.com/LiaTemplates/LiveEdit-Embeddings/refs/heads/main/README.md`
to import the latest version, but keep in mind that the API might evolve. To load a specific version, use:
`import: https://raw.githubusercontent.com/LiaTemplates/LiveEdit-Embeddings/refs/tags/0.0.1/README.md`
2. Copy the definitions into your Project
3. Clone this repository on GitHub
## `@embed`
--{{0}}--
Within the head of the code-block simply add `@embed` to enable the LiveEditor for this code-block. The default height is set to `80vh` and the width to `100%`.
```` markdown
``` markdown @embed
# Hello World
This is a simple example that shows how to use the LiveEditor.
```
````
---
__Result:__
``` markdown @embed
# Hello World
This is a simple example that shows how to use the LiveEditor.
```
### `@embed.style`
--{{0}}--
However, you can overwrite the default settings by using the `@embed.style` macro. The first parameter is the style that should be applied to the iframe.
```` markdown
``` markdown @embed.style(width: 100%; height: 50vh; border: 4px red solid)
# Hello World
... but this time a bit smaller ...
```
````
---
__Result:__
``` markdown @embed.style(width: 100%; height: 50vh; border: 4px red solid)
# Hello World
... but this time a bit smaller ...
```
## `@embed.edit` & `@embed.edit.style`
--{{0}}--
If you want to display an editable code-block, you can use the `@embed.edit` or `@embed.edit.style` macro.
The user can still change the visualization to the preview mode.
```` markdown
``` markdown @embed.edit.style(height: 300px; width: 100%)
# Hello World
This is a simple example that shows how to use the LiveEditor.
```
````
---
__Result:__
``` markdown @embed.edit.style(height: 300px; width: 100%)
# Hello World
This is a simple example that shows how to use the LiveEditor.
```
## `@embed.preview` & `@embed.preview.style`
--{{0}}--
To be complete, you can also directly show the preview and let the user click onto the shared or edit view.
```` markdown
``` markdown @embed.preview.style(height: 400px; width: 100%)
# Hello World
This is a simple example that shows how to use the LiveEditor.
```
````
---
__Result:__
``` markdown @embed.preview.style(height: 400px; width: 100%)
# Hello World
This is a simple example that shows how to use the LiveEditor.
```
## Implementation
--{{0}}--
This macro encodes the entire content of the code-block into a Base64 encoded string and adds it to an the URL of the LiveEditor, as it is depicted in the macro `@embed_`.
This macro is only a helper, which is used by the others with predefined parameters.
```````` html
````````