How to display blocks of code in SquareSpace blog for tutorials

Question

I am trying to display code as part of a tutorial in my squarespace blog post. I know how to insert code and save it so it displays as html or javascript but I want it to be indented and shaded similar to how code is displayed on stackoverflow. Any ideas?

Here's how the code looks now in the post:

Answer 1

There are a couple options to display/format code in Squarespace:

1. Use a Code Block with "Display Source" checked.

   This will automatically format HTML, CSS or JavaScript. For other languages, it's possible to accept a compromise and select "JavaScript". For example, some Python code will look alright when formatted as JavaScript. You will, of course, want to write your code in a text/code editor outside of Squarespace and then copy/paste it into the block. This should maintain your indentation for the most part.
   
   

2. Use an HTML formatting tool.

   Write your code in your favorite text/code editor. When you're done, you can copy/paste it into a tool like tohtml.com (there are probably others; I only found this one in answering this question), select your language, and submit it. It will then output HTML with inline styles that you can straight-up copy and paste into a code block (leaving "Display Source" UNchecked). You will of course want to save your source code for future editing, because tools such as that will format the code for display, which is not conducive to later editing.

The above suggestions assume that you have a preferred code/text editor that you use to write your code and simply want to take it from there and insert it into your Squarespace website. If you're looking to choose an editor, that's a large and opinionated topic. You'll want to search around.