Как добавить подсветку синтаксиса в исходный код в Google Документах

Разработчики и программисты давно использовали текстовые редакторы как основной способ ввода компьютерного кода. Некоторые среды разработки имеют свои собственные встроенные редакторы, но разработчики обычно предпочитают один редактор и придерживаются этой программы. Одна из причин этого заключается в том, что хороший редактор кода включает подсветку синтаксиса, функцию, которая форматирует исходный код и назначает шрифты и цвета ключевым словам и конструкциям в коде, чтобы облегчить чтение. По этой причине разработчики предпочитают текстовые редакторы, такие как Notepad ++, которые рассматриваются в этом руководстве Tech Junkie. Большинство разработчиков не рассматривают Документы Google как потенциальный редактор кода, несмотря на его отличные возможности для рабочих групп и интеграцию с облаком, поскольку в нем нет встроенных опций выделения синтаксиса.

Как добавить подсветку синтаксиса в исходный код в Google Документах

Однако вы можете добавить подсветку синтаксиса в код в документах Google Doc. На самом деле существует как минимум пара надстроек для Документов, которые позволяют форматировать различные языки программирования и разметки с подсветкой синтаксиса. Существует также множество веб-приложений, которые можно использовать для вставки исходного кода с выделением в Документы Google. В этой статье я покажу вам, как добавить подсветку синтаксиса исходного кода в документы Docs.

Отформатируйте исходный код с помощью Code Pretty

Code Pretty - это надстройка для Google Docs, которая автоматически добавляет выделение к выбранному коду. Code Pretty не содержит большого количества настроек для настройки форматирования синтаксиса, но по-прежнему добавляет удобную опцию выделения синтаксиса в Документы. Вы можете добавить CP в Документы, нажав кнопку Птее кнопку на этой веб-странице. Затем нажмите кнопку Разрешать кнопку, чтобы подтвердить разрешения для надстройки.

Затем откройте Документы в своем браузере; и щелкните вкладку «Надстройки», чтобы открыть ее меню. Это меню теперь будет включать надстройку Code Pretty. Чтобы дать вам пример того, как эта надстройка выделяет синтаксис, выберите и скопируйте приведенный ниже образец кода JavaScript в документ Docs, нажав Ctrl + C.

Что умеет JavaScript?

JavaScript может изменять атрибуты HTML.

В этом случае JavaScript изменяет атрибут src (источник) изображения.

Включи свет

Выключи свет

Вставьте этот образец JavaScript в Документы, нажав Ctrl + V. Затем выберите код в текстовом процессоре с помощью курсора. Нажмите Дополнения >Код Довольно и выберите Выбор формата вариант из подменю. Это отформатирует JavaScript, как показано на снимке ниже.

Как уже говорилось, CP не включает много настроек для подсветки синтаксиса. Однако вы можете настроить размер шрифта выделенного кода, щелкнув Дополнения >Код Довольно а также Настройки. Это откроет боковую панель, показанную непосредственно ниже. Затем вы можете выбрать альтернативный размер шрифта по умолчанию для выделенного кода оттуда.

Отформатируйте исходный код с помощью блоков кода

Code Blocks - это альтернативное дополнение к CP, которое вы можете добавить в Документы. На самом деле это немного лучшее дополнение для выделения синтаксиса, поскольку оно включает в себя множество тем выделения. нажмите Бесплатно на этой странице веб-сайта, чтобы добавить блоки кода в Документы.

Когда вы установили блоки кода, откройте Документы, скопируйте и вставьте тот же код JavaScript, указанный выше, в текстовый редактор, как и раньше. Нажмите Дополнения >Блоки кода и выберите Начинать , чтобы открыть боковую панель, показанную на снимке ниже.

Выделите только текст JavaScript с помощью курсора. Убедитесь, что вы не выбрали пустое место для документа над или под кодом. Выбирать JavaScript из первого раскрывающегося меню. Затем вы также можете выбрать тему из Тема выпадающее меню. нажмите Формат кнопку, чтобы добавить подсветку синтаксиса в код, как показано ниже. Теперь текст JavaScript стал более четким, поскольку его теги разметки выделены.

Скопируйте и вставьте выделенный исходный код в Документы Google

Помимо Code Blocks и Code Pretty 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? Поделитесь ими с нами ниже!


$config[zx-auto] not found$config[zx-overlay] not found