이 기사에서는 14개의 강력한 코드 편집 웹사이트(귀하의 코드를 표시할 수 있는 웹사이트)를 추천합니다. 이들 웹사이트는 모두 온라인 미리 보기 기능을 제공하므로 다른 사람들이 귀하의 코드가 어떻게 실행되는지 확인할 수 있습니다. 때로는 "코드 사각형"이라고도 합니다.
간단한 코드 표시 기능을 제공할 뿐만 아니라 코드 협업 및 실제 프로그래밍 프로세스에서 사용되는 많은 기능을 제공합니다. 예를 들어, 소스 코드를 디버깅하는 데 도움을 줄 사람이 필요한 경우 이러한 사이트를 사용하여 문제가 있는 코드를 공유한 다음 도움을 줄 수 있는 사람과 링크를 공유할 수 있습니다. 이를 통해 소스 코드를 쉽게 보고 솔루션을 제공할 수 있습니다.
1. CodePen
웹사이트 : https://codepen.io
CodePen에서는 펜이라는 코드를 시연할 수 있습니다. 펜은 HTML, CSS, JS로 구성됩니다. Codepen에는 코드를 쉽게 표시할 수 있는 많은 기능이 있습니다. 예를 들어 SASS 및 LESS 구문을 지원하며 jQuery, Angular 등과 같이 일반적으로 사용되는 JS 라이브러리를 빠르게 추가할 수 있습니다. 여기 사이트에서 인기 있는 펜을 확인해보세요.
2. Liveweave
웹사이트: https://liveweave.com/
Liveweave는 훌륭한 온라인 소스 코드 편집기입니다. 또한 웹 사이트 디자이너와 개발자를 위한 최고의 놀이터이자 코드를 테스트하고 연습하고 시연하기 위한 훌륭한 도구입니다. 매우 마음에 듭니다. 코드에 타사 종속성을 추가하는 것이 매우 편리합니다. 단 두 번의 클릭만으로 Bootstrap 및 jQuery와 같은 일반적인 웹 개발 패키지를 코드에 추가할 수 있습니다.
3. dabblet
웹사이트: https://dablet.com/
이 코드 표시 플랫폼은 CSS에 더 편향되어 있지만 HTML 및 JS 표시 기능도 있습니다. 한 가지 편리한 점은 -prefix-free JS 라이브러리를 사용하므로 CSS 속성 접두사에 대해 걱정할 필요가 없다는 것입니다.
4. JS Fiddle
웹사이트: https://jsfiddle.net/
JS Fiddle에는 매우 강력한 JavaScript 코드 표시 기능이 있습니다. jQuery, MooTools 및 React와 같은 여러 버전의 개발 라이브러리가 있습니다. 코드 분석 도구인 JSHint가 내장되어 있습니다. echo API를 통해 AJAX 요청을 시뮬레이션할 수도 있습니다.
5.kodtest
웹사이트: http://kodtest.com/
이 코드 강조 웹사이트에서는 미리보기 크기를 조정할 수 있으며 모바일 장치 및 기타 일반적으로 사용되는 화면 장치를 지원합니다. 이 기능은 반응 중단점을 빠르게 디버그하는 데 도움이 될 수 있습니다.
6. Plunker
웹사이트: http://plnkr.co/
Plunker는 웹사이트 개발 아이디어를 만들고, 협업하고, 공유하기 위한 온라인 커뮤니티입니다. 코드 편집기에는 많은 기능이 있습니다. 다음은 Plunker에서 가장 많이 본 디스플레이 목록입니다.
7. CSSDeck
웹사이트: http://i.9ipp.com/wp-content/uploads/2015/06/demo-code-cssdeck.jpg
CSSDeck에는 간단한 사용자 인터페이스가 있습니다. 코드를 표시하는 간단한 방법을 찾고 있다면 이것이 좋은 후보입니다. 귀하의 코드 디스플레이를 본 사람들은 아래에 댓글을 달 수 있지만 사전에 웹사이트에 계정을 등록하거나 Github 계정으로 로그인해야 합니다.
8, code.reloado.com
웹사이트: http://code.reloado.com/#javascript,html
이것은 코드를 표시하는 또 다른 간단한 도구입니다. 많은 js 라이브러리, jQuery, Bootstrap, Prototype, Backbone, TwitterLib, Zepto 등을 제공합니다.
9. Ideone
웹사이트: https://ideone.com/
이 코드 표시 도구를 사용하면 서버측 코드 언어(PHP, Perl 등)를 표시할 수 있습니다. C++와 같은 소프트웨어 프로그래밍 언어도 처리할 수 있습니다. 코드를 실행하면 Ideone은 귀하와 코드 검토자에게 결과를 표시합니다. 또한 발견한 컴파일 오류도 나열합니다.
10, codepad
웹사이트: http://codepad.org/
codepad는 서버 측 음성을 표시하는 또 다른 옵션입니다. PHP, Ruby, C, C++, Python 등과 같은 프로그래밍 언어를 지원합니다.
11.JS Bin
웹사이트: http://jsbin.com/?html, output
JS Bin은 다양한 기능을 통합한 코드 표시 플랫폼입니다. 코드를 디버깅하고 검사할 수 있는 콘솔도 있습니다. 콘솔은 기본적으로 Chrome 브라우저의 콘솔과 동일합니다. 그리고 JS Bin에는 코드 캐스팅이 있습니다.
12.Tinkerbin
웹사이트: https://tinkerbin.herokuapp.com/
Tinkerbin은 필요한 모든 기능을 제공하는 간단한 코드 스퀘어입니다. Tinkerbin은 JavaScript 지원 외에도 CoffeeScript, CSS 지원 외에도 Sass/SCSS/Less, HTML 지원 외에도 HAML도 지원합니다.
14. SQL Fiddle
웹사이트: http://sqlfiddle.com/
SQL Fiddle은 SQL 문을 표시하기 위한 플랫폼입니다. MySQL, MS SQL, PostgreSQL, Oracle Database, SQLite 등을 실행할 수 있습니다.
더 많은 프로그래밍 관련 지식을 보려면 프로그래밍 비디오를 방문하세요! !