{"id":18234485,"url":"https://github.com/liatemplates/liveedit-embeddings","last_synced_at":"2025-07-06T23:35:06.343Z","repository":{"id":261066964,"uuid":"883117744","full_name":"LiaTemplates/LiveEdit-Embeddings","owner":"LiaTemplates","description":"Insert examples with the LiaScript LiveEditor","archived":false,"fork":false,"pushed_at":"2025-02-13T10:16:33.000Z","size":42,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-04-08T14:15:12.378Z","etag":null,"topics":["liascript","liascript-template","markdown","markdown-editor","oer"],"latest_commit_sha":null,"homepage":"https://liascript.github.io/course/?https://raw.githubusercontent.com/LiaTemplates/LiveEdit-Embeddings/refs/heads/main/README.md","language":null,"has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"cc0-1.0","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/LiaTemplates.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2024-11-04T12:07:58.000Z","updated_at":"2024-11-04T13:57:00.000Z","dependencies_parsed_at":"2024-11-04T14:42:08.324Z","dependency_job_id":null,"html_url":"https://github.com/LiaTemplates/LiveEdit-Embeddings","commit_stats":null,"previous_names":["liatemplates/liveedit-embeddings"],"tags_count":1,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/LiaTemplates%2FLiveEdit-Embeddings","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/LiaTemplates%2FLiveEdit-Embeddings/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/LiaTemplates%2FLiveEdit-Embeddings/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/LiaTemplates%2FLiveEdit-Embeddings/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/LiaTemplates","download_url":"https://codeload.github.com/LiaTemplates/LiveEdit-Embeddings/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":247856542,"owners_count":21007621,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["liascript","liascript-template","markdown","markdown-editor","oer"],"created_at":"2024-11-04T22:03:21.445Z","updated_at":"2025-04-08T14:15:13.898Z","avatar_url":"https://github.com/LiaTemplates.png","language":null,"funding_links":[],"categories":[],"sub_categories":[],"readme":"\u003c!--\n\nauthor:  André Dietrich\n\nemail:   LiaScript@web.de\n\nversion: 0.0.1\n\nlogo:    img/logo.png\n\ncomment: This document provides some examples for the usage of the LiaScript\n         LiveEditor, which can be used to embed interactive code examples into\n         your markdown documents.\n\n@embed.edit\n@embed_(edit,height: 80vh; min-width: 100%; border: 1px black solid,``````@0\n``````)\n@end\n\n@embed.edit.style\n@embed_(edit,@0,``````@1\n``````)\n@end\n\n@embed.preview\n@embed_(preview,height: 80vh; min-width: 100%; border: 1px black solid,``````@0\n``````)\n@end\n\n\n@embed.preview.style\n@embed_(preview,@0,``````@1\n``````)\n@end\n\n\n@embed\n@embed_(none,height: 80vh; min-width: 100%; border: 1px black solid,``````@0\n``````)\n@end\n\n\n@embed.style\n@embed_( ,@0,``````@1\n``````)\n@end\n\n\n@embed_\n\u003cscript run-once modify=\"false\"\u003e\nlet code = `@'2`\n\ncode = btoa(unescape(encodeURIComponent(code)))\n\nlet embed =\"@0\"\n\nif (embed==\"preview\" || embed==\"edit\") {\n  embed += \"/\"\n} else {\n  embed = \"\"\n}\n\n'HTML: \u003ciframe loading=\"lazy\" style=\"@1\" src=\"https://liascript.github.io/LiveEditor/?/embed/code/' + embed + code + '\"\u003e\u003c/iframe\u003e'\n\u003c/script\u003e\n@end\n--\u003e\n\n# LiveEdit-Embeddings\n\n    --{{0}}--\nInsert examples with the LiaScript LiveEditor. This allows you to create interactive code examples that can be edited and executed directly in the browser.\n\n    --{{1}}--\nExplore the following resources for more information and documentation:\n\n     {{0-1}}\n* See the GitHub version of this document\n  [here...](https://github.com/LiaTemplates/LiveEdit-Embeddings)\n* See the LiaScript version of this document\n  [here...](https://liascript.github.io/course/?https://raw.githubusercontent.com/LiaTemplates/LiveEdit-Embeddings/refs/heads/main/README.md)\n\nThere are three ways to use this template.\nThe 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.\nAlternatively, you can directly copy the necessary code into the header of your Markdown document, as detailed on the [last slide](#implementation).\nFinally, you can clone this project and customize it according to your needs.\n\n                           {{2}}\n1. Load the macros via\n\n   `import: https://raw.githubusercontent.com/LiaTemplates/LiveEdit-Embeddings/refs/heads/main/README.md`\n\n   to import the latest version, but keep in mind that the API might evolve. To load a specific version, use:\n\n   `import: https://raw.githubusercontent.com/LiaTemplates/LiveEdit-Embeddings/refs/tags/0.0.1/README.md`\n\n2. Copy the definitions into your Project\n\n3. Clone this repository on GitHub\n\n\n## `@embed`\n\n    --{{0}}--\nWithin 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%`.\n\n\n```` markdown\n``` markdown @embed\n# Hello World\n\nThis is a simple example that shows how to use the LiveEditor.\n```\n````\n\n---\n\n__Result:__\n\n``` markdown @embed\n# Hello World\n\nThis is a simple example that shows how to use the LiveEditor.\n```\n\n### `@embed.style`\n\n    --{{0}}--\nHowever, 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.\n\n```` markdown\n``` markdown @embed.style(width: 100%; height: 50vh; border: 4px red solid)\n# Hello World\n\n... but this time a bit smaller ...\n```\n````\n\n---\n\n__Result:__\n\n``` markdown @embed.style(width: 100%; height: 50vh; border: 4px red solid)\n# Hello World\n\n... but this time a bit smaller ...\n```\n\n\n## `@embed.edit` \u0026 `@embed.edit.style`\n\n    --{{0}}--\nIf you want to display an editable code-block, you can use the `@embed.edit` or `@embed.edit.style` macro.\nThe user can still change the visualization to the preview mode.\n\n\n```` markdown\n``` markdown @embed.edit.style(height: 300px; width: 100%)\n# Hello World\n\nThis is a simple example that shows how to use the LiveEditor.\n```\n````\n\n---\n\n__Result:__\n\n``` markdown @embed.edit.style(height: 300px; width: 100%)\n# Hello World\n\nThis is a simple example that shows how to use the LiveEditor.\n```\n\n## `@embed.preview` \u0026 `@embed.preview.style`\n\n    --{{0}}--\nTo be complete, you can also directly show the preview and let the user click onto the shared or edit view.\n\n```` markdown\n``` markdown @embed.preview.style(height: 400px; width: 100%)\n# Hello World\n\nThis is a simple example that shows how to use the LiveEditor.\n```\n````\n\n---\n\n__Result:__\n\n``` markdown @embed.preview.style(height: 400px; width: 100%)\n# Hello World\n\nThis is a simple example that shows how to use the LiveEditor.\n```\n\n## Implementation\n\n    --{{0}}--\nThis 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_`.\nThis macro is only a helper, which is used by the others with predefined parameters.\n\n\n```````` html\n\u003c!--\n@embed.edit\n@embed_(edit,height: 80vh; min-width: 100%; border: 1px black solid,``````@0\n``````)\n@end\n\n@embed.edit.style\n@embed_(edit,@0,``````@1\n``````)\n@end\n\n@embed.preview\n@embed_(preview,height: 80vh; min-width: 100%; border: 1px black solid,``````@0\n``````)\n@end\n\n\n@embed.preview.style\n@embed_(preview,@0,``````@1\n``````)\n@end\n\n\n@embed\n@embed_(none,height: 80vh; min-width: 100%; border: 1px black solid,``````@0\n``````)\n@end\n\n\n@embed.style\n@embed_( ,@0,``````@1\n``````)\n@end\n\n\n@embed_\n\u003cscript run-once modify=\"false\"\u003e\nlet code = `@'2`\n\ncode = btoa(unescape(encodeURIComponent(code)))\n\nlet embed =\"@0\"\n\nif (embed==\"preview\" || embed==\"edit\") {\n  embed += \"/\"\n} else {\n  embed = \"\"\n}\n\n'HTML: \u003ciframe loading=\"lazy\" style=\"@1\" src=\"https://liascript.github.io/LiveEditor/?/embed/code/' + embed + code + '\"\u003e\u003c/iframe\u003e'\n\u003c/script\u003e\n@end\n\n--\u003e\n````````","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fliatemplates%2Fliveedit-embeddings","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fliatemplates%2Fliveedit-embeddings","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fliatemplates%2Fliveedit-embeddings/lists"}