Как отобразить блоки кода в блоге SquareSpace для учебных пособий

Question

Я пытаюсь отобразить код как часть учебника в своем блоге squarespace. Я знаю, как вставить код и сохранить его, чтобы он отображался в виде HTML или JavaScript, но я хочу, чтобы он был с отступом и затенением, подобно тому, как код отображается в stackoverflow. Есть идеи?

Вот как код выглядит сейчас в посте:

Answer 1

Существует несколько вариантов отображения / форматирования кода в Squarespace:

1. Используйте кодовый блок с "Display"Источник "проверен.

   Это автоматически отформатирует HTML, CSS или JavaScript. Для других языков можно принять компромисс и выбрать «JavaScript». Например, некоторый код Python будет хорошо выглядеть при форматировании в JavaScript. Вы, конечно, захотите написать свой код в текстовом редакторе за пределами Squarespace, а затем скопировать / вставить его в блок. Это должно поддерживать ваши отступы по большей части.
   
   

2. Используйте инструмент форматирования HTML.

   Введите свой код в своем любимом текстовом редакторе / редакторе кода. Когда вы закончите, вы можете скопировать / вставить его в такой инструмент, как tohtml.com (возможно, есть другие; я нашел его только в ответе на этот вопрос), выберите ваш язык и отправьте его. Затем он выведет HTML со встроенными стилями, которые вы можете скопировать и вставить в блок кода (оставив флажок «Отображать источник» отключенным). Вы, конечно, захотите сохранить исходный код для будущего редактирования, потому что такие инструменты отформатируют код для отображения, что не способствует последующему редактированию.

Приведенные выше предложения предполагают, что у вас есть предпочтительный кодовый / текстовый редактор, который вы используете для написания своего кода и просто хотите взять его оттуда и вставить на свой сайт Squarespace. Если вы хотите выбрать редактора, это большая и самоуверенная тема. Вы захотите поиск вокруг .