How to set Code Highlight in Google Blog (Blogspot, Blogger) ? # DreaMerZ-Note

Hello, I'm writing a blog to keep in mind. This is DreaMerZ-Note.

In this post, we are going to take a note of how to apply Code Block, Code Highlight to a post on a blogspot. Unlike other blog platforms, the editor or Google Blog isn't really friendly, Because in today's era, that common code block feature doesn't come with the editor on Google Blog. However, it's not impossible to apply without providing it. So this time, we're going to learn how to apply code blocks to a post by applying code highligh javascript to HTML Code.

| Quick View

# Add Code Highlight.js to Google Blog Theme.

  ㄴ Google Blog Theme > Edit HTML > Add Code below between Head Tags.

# Apply Code Highlights when writting a post.

  ㄴ Change the edit mode of the post > Edit HTML.

  ㄴ Write '<pre><code> your code </code></pre>' where you want to write the code.

# Check applied code highlights after preview.

| Apply 'highlight.js' to the theme.

Code Blocks (Code Highlight) that we often use are provided by highlightjs.org. Code Block to be applied to posts on Google Blog this time can also be applied through cdnjs provided by highlightjs.org

- HIGHLIGHTJS.ORG

1. Check 'As HTML Tags' for cdnjs in the public home of HIGHLIGHTJS.ORG.

   ㄴ The href address may change, so plz copy it.

#Code.

.....

2. Apply the script code you copied to the Google Blog Theme.

   ㄴ Google Blog Settings > Theme > Edit HTML.

   ㄴ Paste the script code copied between the Head tags and save it.

| Apply Code Highlight to a Post.

1. Check the public home of HIGHLIGHTJS.ORG for the tag to specify the code block. 

   ㄴ Write the code between the tags below.

   ㄴ <pre><code> your code </code></pre>

2. Create a post and Write the necessary code as shown in the example below.

   ㄴ I wrote script tags on Before and After for ease of recognition.

3. In the Created state, switch edit mode to HTML and Create a code block tag.

   ㄴ Switching to HTML Edit Mode.

   ㄴ Add '<pre><code> your code </code></pre>' tag before and after the string to which the code block will be applied.

4. If you preview it after writing it, you can see that the code block (code highlight) has been added as shown in the image below.