![Редактори коду онлайн]()
Не завжди у програміста є під рукою спеціальне програмне забезпечення, через яке він і працює з кодом. Якщо так сталося, що редагувати код потрібно, а відповідного софта немає під рукою, можна скористатися безкоштовними онлайн-сервісами. Далі ми розповімо про двох таких сайтах і детально розберемо принцип роботи в них.
Редагуємо програмний код онлайн
Оскільки подібних редакторів існує велика кількість і їх все просто не розглянути, ми вирішили сконцентрувати увагу лише на двох інтернет-ресурсах, які є найпопулярнішими і представляють основний набір необхідних інструментів.
Читайте також: Як написати програму на Java
Спосіб 1: CodePen
На сайті CodePen багато розробників діляться власними кодами, зберігають і працюють з проектами. Немає нічого складного в тому, щоб створити свій аккаунт і відразу ж приступити до написання, а робиться це так:
Перейти на сайт CodePen
- Відкрийте головну сторінку сайту CodePen, скориставшись зазначеної вище посиланням, і переходите до створення нового профілю.
![Перейти до реєстрації на сайті CodePen]()
- Виберіть зручний шлях реєстрації та, дотримуючись наведених інструкцій, створіть власний обліковий запис.
![Пройти процедуру реєстрації на сайті CodePen]()
- Заповніть інформацію про своїй сторінці.
![Заповнити особисту інформацію на сайті CodePen]()
- Тепер можна піднятися вгору вкладки, розгорнути спливаюче меню «Create» і вибрати пункт «Project».
![Створити новий проект на сайті CodePen]()
- У вікні праворуч ви побачите підтримувані формати файлів і мови програмування.
![Підтримувані типи файлів на сервісі CodePen]()
- Починайте редагування, вибравши один з шаблонів або стандартну розмітку HTML5.
![Використання шаблонів на сервісі CodePen]()
- Зліва будуть відображатися всі створені бібліотеки і файли.
![Використання шаблонів на сервісі CodePen]()
- Лівий клік миші по об'єкту активує його у вікні праворуч відображається код.
![Редагування файлів на сервісі CodePen]()
- Внизу присутні кнопки, що дозволяють додати власні папки і файли.
![Додавання нових файлів на сервісі CodePen]()
- Після створення задайте ім'я об'єкту і збережіть зміни.
![Задати ім'я новому файлу на сервісі CodePen]()
- У будь-який момент ви можете перейти до налаштувань проекту, клацнувши ЛКМ на «Settings».
![Перейти до налаштувань на сервісі CodePen]()
- Тут виставляється основна інформація - назва, опис, теги, а також параметри попереднього перегляду і вдавлення коду.
![Змінити і зберегти налаштування на сервісі CodePen]()
- Якщо вас не влаштовує поточний вид робочої області, вам доступно його зміна шляхом натискання на «Change View» і вибору необхідного вікна перегляду.
![Змінити зовнішній вигляд на сервісі CodePen]()
- Коли виотредактіруете потрібні рядки коду, клацніть на «Save All + Run», щоб зберегти всі зміни і запустити програму. Внизу відобразиться скомпільований результат.
![Процес компіляції коду на сервісі CodePen]()
- Збережіть проект у себе на комп'ютері, клікнувши на «Export».
![Підготовка проекту для скачування CodePen]()
- Дочекайтеся завершення обробки і завантажте архів.
![Завантажити проект на сервісі CodePen]()
- Оскільки в безкоштовній версії CodePen користувач не може мати більше одного активного проекту, його потрібно буде стерти, щоб створити новий. Для цього клацніть на «Delete».
![Перейти до видалення проекту на сервісі CodePen]()
- Введіть перевірочне слово і підтвердіть видалення.
![Підтвердити видалення проекту з сервісу CodePen]()
Вище нами були розглянуті базові функції онлайн-сервісу CodePen. Як бачите, він непогано підходить для того, щоб не тільки редагувати код, але і писати його з нуля, а потім ділитися з іншими користувачами. Єдиним недоліком сайту є обмеження в безкоштовній версії.
Спосіб 2: LiveWeave
Тепер хотілося б зупинитися на веб-ресурсі LiveWeave. У ньому присутні не тільки вбудований редактор коду, але і інші інструменти, про які ми і поговоримо нижче. Починається робота з сайтом так:
Перейти на сайт LiveWeave
- Перейдіть по посиланню вище, щоб потрапити на сторінку редактора. Тут відразу ж ви побачите чотири вікна. У першому відбувається написання коду в HTML5, у другому - JavaScript, в третьому - CSS, а в четвертому показується результат компіляції.
![Чотири активних вікна на сервісі LiveWeave]()
- Однією з особливостей даного сайту можна вважати спливаючі підказки при наборі тегів, вони дозволяють підвищити швидкість набору і уникнути помилок в написанні.
![Відображення інструкцій на сервісі LiveWeave]()
- За замовчуванням компіляція відбувається в live-режимі, тобто, обробляється відразу ж після внесення змін.
![Компіляція в режимі реального часу на сервісі LiveWeave]()
- Якщо ви хочете деактивувати цю функцію, вам потрібно перемістити повзунок навпроти необхідного пункту.
![Відключити автоматичну компіляцію на сервісі LiveWeave]()
- Поруч є включення і виключення нічного режиму.
![Виключити нічний режим на сервісі LiveWeave]()
- Ви можете перейти до роботи з контролерами CSS, натиснувши на відповідну кнопку на панелі зліва.
![Перейти до редактора CSS на сервісі LiveWeave]()
- У меню, редагується напис шляхом переміщення повзунків і зміни певних значень.
![Редагувати CSS на сервісі LiveWeave]()
- Далі рекомендуємо звернути увагу на визначник квітів.
![Перейти до оглядача квітів на сервісі LiveWeave]()
- Вам надають велику палітру, де можна вибрати будь-який відтінок, а вгорі відобразиться його код, який пізніше використовується при написанні програм з інтерфейсом.
![Робота з оглядачем квітів на сервісі LiveWeave]()
- Прокрутіть в меню «Vector Editor».
![Перейти до векторному редактору на сервісі LiveWeave]()
- У ньому здійснюється робота з графічними об'єктами, що також іноді буде корисно під час розробки софта.
![Робота в векторному редакторі на сервісі LiveWeave]()
- Відкрийте контекстне меню «Tools». Тут доступна завантаження шаблону, збереження HTML-файлу і генератор тексту.
![Перейти до збереження на сервісі LiveWeave]()
- Скачується проект у вигляді одного файлу.
![Відкрити збережений документ з сервісу LiveWeave]()
- Якщо ви хочете зберегти роботу, попередньо доведеться пройти процедуру реєстрації в даному онлайн-сервісі.
![Зберегти проект на сервісі LiveWeave]()
Тепер ви знаєте, як редагується код на сайті LiveWeave. Ми можемо сміливо рекомендувати використовувати цей інтернет-ресурс, оскільки на ньому присутня безліч функцій і інструментів, що дозволяють оптимізувати і спростити процес роботи з програмним кодом.
На цьому наша стаття завершується. Сьогодні ми представили вам дві докладні інструкції по роботі з кодом за допомогою онлайн-сервісів. Сподіваємося, ця інформація була корисною і допомогла визначитися з вибором найбільш підходящого веб-ресурсу для роботи.
Читайте також:
Вибираємо середу програмування
Програми для створення Андроїд-додатків
Вибираємо програму для створення гри