{"id":2669,"date":"2023-10-26T16:37:51","date_gmt":"2023-10-26T09:37:51","guid":{"rendered":"https:\/\/dev.artru.io.vn\/?p=2669"},"modified":"2023-10-27T14:38:14","modified_gmt":"2023-10-27T07:38:14","slug":"trai-nghiem-code-editor-live-preview-tren-artru","status":"publish","type":"post","link":"https:\/\/artru.net\/en\/trai-nghiem-code-editor-live-preview-tren-artru\/","title":{"rendered":"Experience Code Editor Live Preview on ARTRU"},"content":{"rendered":"

Introducing Code Editor<\/h2>\n\n\n\n

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,\u2026<\/p>\n\n\n\n

Have inspiration from Fox Themes<\/a>, I created a Code Editor that has similar features and added a few things.<\/p>\n\n\n\n

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

Link to experience ARTRU Code Editor<\/a>.<\/p>\n\n\n\n

Functions<\/h2>\n\n\n\n

Real-time Preview<\/h3>\n\n\n\n

Window Preview <\/strong>will automatically update every time the code content changes. Or click the button Run<\/strong> to refresh the Preview section.<\/p>\n\n\n

\n
\"ARTRU
ARTRU Code Editor Live Preview<\/figcaption><\/figure>\n<\/div>\n\n\n

Copy Code<\/h3>\n\n\n\n

Click the Copy Code button to save the code to the Clipboard.<\/p>\n\n\n

\n
\"Button
Button Copy Code<\/figcaption><\/figure>\n<\/div>\n\n\n

Beautify Code<\/h3>\n\n\n\n

Helps align and reformat code to make it straight.<\/p>\n\n\n

\n
\"Button
Button Beautify Code<\/figcaption><\/figure>\n<\/div>\n\n\n

F1<\/h3>\n\n\n\n

Press F1<\/strong> on the keyboard or button on the toolbar to open the toolbox Command<\/strong>.<\/p>\n\n\n

\n
\"Open
Open Command Palette<\/figcaption><\/figure>\n<\/div>\n\n\n

Ctrl + ,<\/h3>\n\n\n\n

Press Ctrl + ,<\/strong> on the keyboard or button on the toolbar to open it Settings Menu<\/strong>.<\/p>\n\n\n

\n
\"Show
Show Settings Menu<\/figcaption><\/figure>\n<\/div>\n\n\n

Create Link Code<\/h3>\n\n\n
\n
\"Create
Create Link Code<\/figcaption><\/figure>\n<\/div>\n\n\n

This is probably the feature I like the most.<\/p>\n\n\n\n

Now, you can use this feature to create a shared link immediately without having to create an account like github or codepen to save.<\/p>\n\n\n\n

The downside is that it is impossible to create a link if the code is too long.<\/p>","protected":false},"excerpt":{"rendered":"

Gi\u1edbi thi\u1ec7u Code Editor V\u00ec hay l\u01b0\u1ee3n l\u1edd tr\u00ean c\u00e1c group v\u1ec1 UI\/UX, HTML, CSS, JS t\u00f4i th\u1ea5y c\u00f3 nhi\u1ec1u b\u1ea1n \u1edf \u0111\u00e2y mu\u1ed1n s\u1eeda l\u1ed7i code, hay chia s\u1ebb m\u1ed9t v\u00e0i \u0111o\u1ea1n code hay cho m\u1ecdi ng\u01b0\u1eddi \u0111\u1ec1u ph\u1ea3i ch\u1ee5p m\u00e0n h\u00ecnh ho\u1eb7c upload l\u00ean github, codepen,… L\u1ea5y c\u1ea3m h\u1ee9ng t\u1eeb Fox Theme, t\u00f4i […]<\/p>\n","protected":false},"author":1,"featured_media":2662,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[9],"tags":[],"class_list":["post-2669","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-website"],"_links":{"self":[{"href":"https:\/\/artru.net\/en\/wp-json\/wp\/v2\/posts\/2669","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/artru.net\/en\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/artru.net\/en\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/artru.net\/en\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/artru.net\/en\/wp-json\/wp\/v2\/comments?post=2669"}],"version-history":[{"count":0,"href":"https:\/\/artru.net\/en\/wp-json\/wp\/v2\/posts\/2669\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/artru.net\/en\/wp-json\/wp\/v2\/media\/2662"}],"wp:attachment":[{"href":"https:\/\/artru.net\/en\/wp-json\/wp\/v2\/media?parent=2669"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/artru.net\/en\/wp-json\/wp\/v2\/categories?post=2669"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/artru.net\/en\/wp-json\/wp\/v2\/tags?post=2669"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}