docs(Code-to-Image): add docs for code-to-image

live-codes · Dec 19, 2024 · 1aaad00 · 1aaad00
1 parent 3849bd3
commit 1aaad00
Show file tree

Hide file tree

Showing 9 changed files with 32 additions and 0 deletions.
diff --git a/docs/docs/features/code-to-image.md b/docs/docs/features/code-to-image.md
@@ -0,0 +1,23 @@
+# Code to Image
+
+LiveCodes has a feature called "Code to Image" that allows converting the code in the code editor into nice-looking images, that can be downloaded or shared.
+
+This can be accessed from the camera icon in the toolbar below the editor. Clicking the icon will open the "Code to Image" screen and load the code in the editor.
+
+![Code to Image](../../static/img/screenshots/code-to-image-1.jpg)
+
+Code can be modified in the "Code to Image" screen and then downloaded as image or shared.
+
+![Code to Image](../../static/img/screenshots/code-to-image-2.jpg)
+
+There are many options to configure the image to be generated, including background color, border radius, image size, padding, shadow, window style, share URL, editor theme, opacity, code font, image format, etc.
+
+There are multiple presets that can be used or the options can be manually configured.
+
+![Code to Image](../../static/img/screenshots/code-to-image-3.jpg)
+
+![Code to Image](../../static/img/screenshots/code-to-image-4.jpg)
+
+![Code to Image](../../static/img/screenshots/code-to-image-5.jpg)
+
+![Code to Image](../../static/img/screenshots/code-to-image-6.jpg)
diff --git a/docs/docs/features/index.md b/docs/docs/features/index.md
@@ -70,6 +70,14 @@ You can [broadcast](./broadcast.md) source code or result in real-time to others
 
 Do you work on multiple devices? No Problem! You may [sync](./sync.md), [backup and restore](./backup-restore.md) your data any time on any device.
 
+## Themes
+
+LiveCodes comes with dark and light themes. In addition, a theme color can be set to change the app color.
+
+## i18n
+
+LiveCodes supports [internationalization](./i18n.md) for multiple languages.
+
 ## Client-side!
 
 LiveCodes runs in the browser, where all the processing/transpilation occurs, with no server rounds required. So, after the initial load, it becomes pretty fast. It can be hosted on any static file server or CDN. No `npm install`s. Just the browser!

diff --git a/docs/sidebars.js b/docs/sidebars.js
@@ -47,6 +47,7 @@ const sidebars = {
             'features/share',
             'features/welcome',
             'features/recover',
+            'features/code-to-image',
             'features/display-modes',
             'features/default-view',
             'features/themes',

diff --git a/docs/static/img/screenshots/code-to-image-1.jpg b/docs/static/img/screenshots/code-to-image-1.jpg
diff --git a/docs/static/img/screenshots/code-to-image-2.jpg b/docs/static/img/screenshots/code-to-image-2.jpg
diff --git a/docs/static/img/screenshots/code-to-image-3.jpg b/docs/static/img/screenshots/code-to-image-3.jpg
diff --git a/docs/static/img/screenshots/code-to-image-4.jpg b/docs/static/img/screenshots/code-to-image-4.jpg
diff --git a/docs/static/img/screenshots/code-to-image-5.jpg b/docs/static/img/screenshots/code-to-image-5.jpg
diff --git a/docs/static/img/screenshots/code-to-image-6.jpg b/docs/static/img/screenshots/code-to-image-6.jpg