This article recommends 14 powerful code editing websites (websites that can display your code). They all provide online preview functions, so others can see how your code runs. They are sometimes called "code squares".
They not only provide simple code display functions, but also provide many functions that are used in code collaboration and actual programming processes. For example, when you need someone to help you debug your source code, you can use these sites to share your problematic code and then share the link with the person who can help you. This makes it easy for them to view your source code and provide solutions.
1. CodePen
Website: https://codepen.io
On CodePen, you can demonstrate code called pens. Pen is composed of HTML, CSS and JS. Codepen has many functions that make it easy for you to display your code. For example, it supports SASS and LESS syntax, and can quickly add commonly used JS libraries such as jQuery, Angular, etc. Check out the popular Pens on the site here.
2. Liveweave
Website: https://liveweave.com/
Liveweave is a great online source code editor. It's also the ultimate playground for web designers and developers, a great tool for testing, practicing and demonstrating your code. I like it very much, it is very convenient to add third-party dependencies to your code. You can add common web development packages such as Bootstrap and jQuery to your code with just two clicks.
3, dabblet
Website: https://dabblet.com/
This code display platform is more biased towards CSS, but it also has HTML and JS display functions. One convenience is that it uses a -prefix-free JS library, so you don't need to worry about prefixing CSS properties.
4. JS Fiddle
Website: https://jsfiddle.net/
JS Fiddle has a very powerful JavaScript code display function. It has multiple versions of development libraries such as jQuery, MooTools, and React. It has built-in code analysis tool JSHint. It even allows you to simulate AJAX requests through its echo API.
5, kodtest
Website: http://kodtest.com/
This code highlighting website allows you to adjust the preview size and supports Mobile devices and some other commonly used screen devices. This feature can help you quickly debug reactive breakpoints.
6. Plunker
Website: http://plnkr.co/
Plunker is a platform for creating, collaborating, and sharing your website development ideas online community. Its code editor has a lot of features. Here is a list of the most viewed displays on Plunker.
7、CSSDeck
Website: http://i.9iphp.com/wp-content/uploads/2015/06/demo-code-cssdeck.jpg
CSSDeck has a simple user interface. If you're looking for a simple way to display code, this is a good candidate. People who see your code display can comment below, but they need to register an account on the website in advance or log in with a Github account.
8, code.reloado.com
Website: http://code.reloado.com/#javascript,html
This is another A simple tool for displaying your code. It provides many js libraries, jQuery, Bootstrap, Prototype, Backbone, TwitterLib, Zepto and so on.
9. Ideone
Website: https://ideone.com/
This code display tool allows you to display server-side code language (PHP , Perl, etc.). Software programming languages like C can also be handled. When you run your code, Ideone displays the results for you and your code reviewers. It will also list for you the compilation errors it finds.
10. codepad
Website: http://codepad.org/
codepad is another option for displaying server-side speech. It supports programming languages such as PHP, Ruby, C, C, Python, etc.
11. JS Bin
Website: http://jsbin.com/?html, output
JS Bin is an integration with many functions Code display platform. It even has a console to let you debug and inspect your code. Its console is basically the same as the Chrome browser's console. And JS Bin has codecasting.
12. Tinkerbin
URL: https://tinkerbin.herokuapp.com/
Tinkerbin is a simple one that provides everything you need Functional code square. In addition to supporting JavaScript, Tinkerbin also supports CoffeeScript, in addition to supporting CSS, it also supports Sass/SCSS/Less, and in addition to supporting HTML, it also supports HAML.
14. SQL Fiddle
Website: http://sqlfiddle.com/
SQL Fiddle is a platform for displaying your SQL statements. It can run MySQL, MS SQL, PostgreSQL, Oracle Database, SQLite, etc.
For more programming related knowledge, please visit:Programming Video! !