Experience Code Editor Live Preview on ARTRU

Introducing Code Editor

Because I often hang around on groups about UI/UX, HTML, CSS, JS, I see that many people here want to fix code errors, or share some good code for everyone to take a screenshot or upload to github. codepen,...

Have inspiration from Fox Themes, I created a Code Editor that has similar features and added a few things.

Do you think I wrote this Code Editor myself? No, I refer to all of these features from Chat-AI (Bard, Bing, ChatGPT).

Link to experience ARTRU Code Editor.

Functions

Real-time Preview

Window Preview will automatically update every time the code content changes. Or click the button Run to refresh the Preview section.

Copy Code

Click the Copy Code button to save the code to the Clipboard.

Beautify Code

Helps align and reformat code to make it straight.

F1

Press F1 on the keyboard or button on the toolbar to open the toolbox Command.

Ctrl + ,

Press Ctrl + , on the keyboard or button on the toolbar to open it Settings Menu.

Create Link Code

This is probably the feature I like the most.

Now, you can use this feature to create a shared link immediately without having to create an account like github or codepen to save.

The downside is that it is impossible to create a link if the code is too long.