Разработчики и программисты давно используют текстовые редакторы в качестве основного способа ввода компьютерного кода. Некоторые среды разработки имеют свои собственные встроенные редакторы, но разработчики обычно любят один редактор и придерживаются этой программы. Одна из причин этого заключается в том, что хороший редактор кода включает подсветку синтаксиса, функцию, которая форматирует исходный код и присваивает шрифты и цвета ключевым словам и конструкциям в коде, чтобы сделать его намного проще для чтения. По этой причине разработчики предпочитают текстовые редакторы, такие как Notepad ++, которые рассматриваются в этом руководстве Tech Junkie. Большинство разработчиков не считают Google Docs потенциальным редактором кода, несмотря на его отличные функции для рабочих групп и облачную интеграцию, поскольку в нем нет встроенных опций подсветки синтаксиса.
Однако вы можете добавить подсветку синтаксиса к коду в документах Google Doc. На самом деле есть по крайней мере пара дополнений для документов, которые позволяют форматировать различные языки программирования и разметки с подсветкой синтаксиса. Существует также множество веб-приложений, которые вы можете использовать для вставки исходного кода с подсветкой в Документах Google. Я покажу вам, как добавить подсветку синтаксиса исходного кода в ваши документы.
Форматировать исходный код с помощью Code Pretty
Code Pretty - это надстройка для Документов Google, которая автоматически добавляет выделение к выбранному коду. Code Pretty не включает в себя огромное количество настроек для настройки синтаксического форматирования, но все равно добавляет удобную опцию подсветки синтаксиса в Docs. Вы можете добавить CP в Документы, нажав кнопку Fr ee на этой веб-странице. Затем нажмите кнопку Разрешить , чтобы подтвердить разрешения для надстройки.
Затем откройте Документы в вашем браузере; и нажмите вкладку «Дополнения», чтобы открыть ее меню. Это меню теперь будет включать в себя дополнение Code Pretty. Чтобы дать вам пример того, как эта надстройка выделяет синтаксис, выберите и скопируйте приведенный ниже пример кода JavaScript в документ Docs, нажав Ctrl + C.
Что может сделать JavaScript?
JavaScript может изменить атрибуты HTML.
В этом случае JavaScript изменяет атрибут src (source) изображения.
Вставьте этот образец JavaScript в Документы, нажав Ctrl + V. Затем выберите код в текстовом редакторе с помощью курсора. Нажмите « Дополнения» > « Code Pretty» и выберите параметр « Выбор формата» в подменю. Это отформатирует JavaScript, как показано на снимке непосредственно ниже.
Как уже говорилось, CP не включает много настроек для подсветки синтаксиса. Тем не менее, вы можете настроить размер шрифта выделенного кода, нажав Надстройки > Code Pretty and Settings . Это откроет боковую панель, показанную непосредственно ниже. Затем вы можете выбрать альтернативный размер шрифта по умолчанию для выделенного кода оттуда.
Форматировать исходный код с помощью блоков кода
Code Blocks - это альтернативное дополнение к CP, которое вы можете добавить в Docs. На самом деле это немного лучшая надстройка для подсветки синтаксиса, так как она включает в себя множество тем подсветки. Нажмите кнопку « Бесплатно» на этой странице веб-сайта, чтобы добавить блоки кода в документы.
Когда вы установили блоки кода, откройте Docs, скопируйте и вставьте тот же код JavaScript выше в текстовый процессор, что и раньше. Нажмите « Дополнения» > « Блоки кода» и выберите « Пуск», чтобы открыть боковую панель, показанную на снимке ниже.
Выберите только текст JavaScript с помощью курсора. Убедитесь, что вы не выбираете пустое место для документа над или под кодом. Выберите JavaScript в первом раскрывающемся меню. Затем вы также можете выбрать тему из выпадающего меню Theme . Нажмите кнопку « Формат» , чтобы добавить подсветку синтаксиса в код, как показано ниже. Теперь текст JavaScript стал намного понятнее с выделенными тегами разметки.
Скопируйте и вставьте выделенный исходный код в Google Docs
Помимо кодовых блоков и кодовых симпатичных документов, вы также можете использовать веб-приложения для подсветки синтаксиса для форматирования исходного кода. Затем вы можете скопировать и вставить выделенный исходный код из веб-приложения обратно в документ Docs. Textmate - это одно веб-приложение для подсветки синтаксиса, которое форматирует множество языков программирования и разметки.
Нажмите на эту гиперссылку, чтобы открыть Textmate. Затем скопируйте и вставьте текст JavaScript, включенный в этот пост, в поле исходного кода Textmate с помощью горячих клавиш Ctrl + C и Ctrl + V. Выберите JavaScript в раскрывающемся меню «Язык». Выберите тему выделения синтаксиса в раскрывающемся меню «Тема». Нажмите кнопку « Выделить» , чтобы получить предварительный просмотр для форматирования исходного кода, как показано на снимке непосредственно ниже.
Затем выберите выделенный JavaScript в предварительном просмотре с помощью курсора и нажмите Ctrl + C. Вставьте выделенный код в Google Docs, нажав Ctrl + V. Это добавит выделенный исходный код JavaScript в документ Docs, как показано непосредственно ниже.
Таким образом, вам не нужен настольный текстовый редактор для добавления подсветки синтаксиса к программному обеспечению и коду сайта. Вместо этого вы можете выделить синтаксический код в документах Docs с помощью расширений Code Pretty и Code Blocks. Кроме того, скопируйте и вставьте свой код в веб-приложение Textmate и из него, чтобы вставить исходный код с выделением в Документах Google.
Есть ли другие способы добавить синтаксическое форматирование в Документы Google? Поделитесь ими с нами ниже!
