Разработчики и программисты давно использовали текстовые редакторы как основной способ ввода компьютерного кода. Некоторые среды разработки имеют свои собственные встроенные редакторы, но разработчики обычно предпочитают один редактор и придерживаются этой программы. Одна из причин этого заключается в том, что хороший редактор кода включает подсветку синтаксиса, функцию, которая форматирует исходный код и назначает шрифты и цвета ключевым словам и конструкциям в коде, чтобы облегчить чтение. Текстовые редакторы, такие как Notepad ++, которые рассматриваются в этом Руководство Tech Junkie , по этой причине одобряются разработчиками. Большинство разработчиков не рассматривают Документы 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, как показано на снимке ниже.
обрезать сразу несколько изображений windows 10
Как уже говорилось, 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? Поделитесь ими с нами ниже!
