Is there a way to integrate Prettify with Blogger/BlogSpot?

Question

Is there a way to integrate Prettify with Blogger/BlogSpot?

I am currently utilizing blogger.com as a platform to showcase programming texts and I am interested in incorporating Prettify (similar to Stack Overflow) to enhance the appearance of my code samples.

What is the best method for installing the Prettify scripts onto my blog's domain? Should I consider linking to a shared copy instead, if feasible? Additionally, I have access to webspace on a separate domain - could this be beneficial?

javascript blogger shared-hosting prettify

Answer 1

Answer №1

Creating a new entry on Blogger allows you to utilize HTML in your post and edit your blog entries as needed.

To get started, visit , sign in, and then go to Posting → Edit Posts → Edit. Insert the following code snippet at the top:

<script type="text/javascript" language="javascript" src="https://cdnjs.cloudflare.com/ajax/libs/prettify/r298/prettify.min.js"></script>
<script type="text/javascript" language="javascript" src="https://cdnjs.cloudflare.com/ajax/libs/prettify/r298/lang-css.min.js"></script>
<script type="text/javascript">
function addLoadEvent(func) {
  var oldonload = window.onload;
  if (typeof window.onload != 'function') {
    window.onload = func;
  } else {
    window.onload = function() {
      if (oldonload) {
        oldonload();
      }
      func();
    }
  }
}
addLoadEvent(function() {
    prettyPrint();
});
</script>
<style type="text/css">
/* Pretty printing styles. Used with prettify.js. */
...

Note that directly using prettyPrint as an event handler may cause confusion, so it is recommended to follow the provided instructions for proper implementation.

If linking to the stylesheet is not allowed, embed the contents of prettify.css within your Blogger post. Include a <code></code> or <pre></pre> tag with the class name ""prettyprint"" to display formatted code snippets.

You can enhance all pages by default by adding the specified code to your HTML layout. In newer Blogger versions, CSS files can be easily linked in the <head> section for seamless integration.

...

Answer 2

Creating a new entry on Blogger allows you to utilize HTML in your post and edit your blog entries as needed.

To get started, visit , sign in, and then go to Posting → Edit Posts → Edit. Insert the following code snippet at the top:

<script type="text/javascript" language="javascript" src="https://cdnjs.cloudflare.com/ajax/libs/prettify/r298/prettify.min.js"></script>
<script type="text/javascript" language="javascript" src="https://cdnjs.cloudflare.com/ajax/libs/prettify/r298/lang-css.min.js"></script>
<script type="text/javascript">
function addLoadEvent(func) {
  var oldonload = window.onload;
  if (typeof window.onload != 'function') {
    window.onload = func;
  } else {
    window.onload = function() {
      if (oldonload) {
        oldonload();
      }
      func();
    }
  }
}
addLoadEvent(function() {
    prettyPrint();
});
</script>
<style type="text/css">
/* Pretty printing styles. Used with prettify.js. */
...

Note that directly using prettyPrint as an event handler may cause confusion, so it is recommended to follow the provided instructions for proper implementation.

If linking to the stylesheet is not allowed, embed the contents of prettify.css within your Blogger post. Include a <code></code> or <pre></pre> tag with the class name ""prettyprint"" to display formatted code snippets.

You can enhance all pages by default by adding the specified code to your HTML layout. In newer Blogger versions, CSS files can be easily linked in the <head> section for seamless integration.

...

Answer 3

Answer №2

This method worked like a charm for me right away.

Navigate to Blogger > Layout > Edit HTML
Copy the snippet below and paste it right after <head> in the "Edit template" section:

snippet:

<link href='http://google-code-prettify.googlecode.com/svn/trunk/src/prettify.css' rel='stylesheet' type='text/css'/>
<script src='http://google-code-prettify.googlecode.com/svn/trunk/src/prettify.js' type='text/javascript'></script>

Replace <body> with
```
<body onload='prettyPrint()'>
```
after </head>
Click on "SAVE TEMPLATE"
Go to Blogger > Posting > New Post
Ensure you are editing the HTML by selecting "Edit HTML." In the blank field, try:

<pre class="prettyprint">int foo=0;
NSLog(@"%i", foo);
</pre>

If you click "Preview" now, you'll only see the code in black. Don't worry about it yet.
Click "PUBLISH POST" followed by "VIEW BLOG". Your code should now look prettier.

Answer 4

This method worked like a charm for me right away.

Navigate to Blogger > Layout > Edit HTML
Copy the snippet below and paste it right after <head> in the "Edit template" section:

snippet:

<link href='http://google-code-prettify.googlecode.com/svn/trunk/src/prettify.css' rel='stylesheet' type='text/css'/>
<script src='http://google-code-prettify.googlecode.com/svn/trunk/src/prettify.js' type='text/javascript'></script>

Replace <body> with
```
<body onload='prettyPrint()'>
```
after </head>
Click on "SAVE TEMPLATE"
Go to Blogger > Posting > New Post
Ensure you are editing the HTML by selecting "Edit HTML." In the blank field, try:

<pre class="prettyprint">int foo=0;
NSLog(@"%i", foo);
</pre>

If you click "Preview" now, you'll only see the code in black. Don't worry about it yet.
Click "PUBLISH POST" followed by "VIEW BLOG". Your code should now look prettier.

Answer 5

Answer №3

Google Code Prettify now features a convenient auto-loader script that allows you to easily load the necessary JavaScript and CSS using just one URL.

To implement this feature on your Blogger template, simply add the following script to the <head> section:

<script src="https://google-code-prettify.googlecode.com/svn/loader/run_prettify.js"></script>

For more detailed instructions, check out Getting Started.

Answer 6

Google Code Prettify now features a convenient auto-loader script that allows you to easily load the necessary JavaScript and CSS using just one URL.

To implement this feature on your Blogger template, simply add the following script to the <head> section:

<script src="https://google-code-prettify.googlecode.com/svn/loader/run_prettify.js"></script>

For more detailed instructions, check out Getting Started.

Answer 7

Answer №4

Adding the Google Code prettifier to your Blogger account is a simple process.

All you need to do is insert the JavaScript library below into your Blogger account just before the closing tag.

<script src="https://google-code-prettify.googlecode.com/svn/loader/run_prettify.js"></script>

It should look something like this...

Congratulations! You have now successfully integrated the Google Code prettifier into your Blogger account.

If you wish to include code (HTML, CSS, PHP, etc.) in your Blogger post, simply place it between .... tags.

 <pre class="prettyprint">...</pre>

or

<code class="prettyprint">...</code>

View a demo of the Google Prettify on Blogger here

For more guidance on adding the Google prettifier to your Blogger account, please refer to this documentation available at the following link.

Syntax Highlighter For Blogger Using Google Prettify

Answer 8

Adding the Google Code prettifier to your Blogger account is a simple process.

All you need to do is insert the JavaScript library below into your Blogger account just before the closing tag.

<script src="https://google-code-prettify.googlecode.com/svn/loader/run_prettify.js"></script>

It should look something like this...

Congratulations! You have now successfully integrated the Google Code prettifier into your Blogger account.

If you wish to include code (HTML, CSS, PHP, etc.) in your Blogger post, simply place it between .... tags.

 <pre class="prettyprint">...</pre>

or

<code class="prettyprint">...</code>

View a demo of the Google Prettify on Blogger here

For more guidance on adding the Google prettifier to your Blogger account, please refer to this documentation available at the following link.

Syntax Highlighter For Blogger Using Google Prettify

Answer 9

Answer №5

Check out the SyntaxHightlighter tool.

The website provides step-by-step instructions for using it on blogger.com and also offers a hosted version of the necessary scripts, eliminating the need to host files on your own server.

Answer 10

Check out the SyntaxHightlighter tool.

The website provides step-by-step instructions for using it on blogger.com and also offers a hosted version of the necessary scripts, eliminating the need to host files on your own server.

Answer 11

Answer №6

If you're looking for an alternative solution, consider trying out the syntaxhighlighter 2.0 JavaScript library. I recently implemented it on my website and so far, it's been working really well.

For more information, check out this helpful blog post:

Syntax Highlighting with Blogger Engine

Answer 12

If you're looking for an alternative solution, consider trying out the syntaxhighlighter 2.0 JavaScript library. I recently implemented it on my website and so far, it's been working really well.

For more information, check out this helpful blog post:

Syntax Highlighting with Blogger Engine

Answer 13

Answer №7

Although it may not directly address your inquiry, have you considered exploring GitHub? By creating a free account, you can enjoy syntax-colored "gists" that can be shared and hosted on your own webpage.

However, it is important to note that the content will be hosted on GitHub's platform, so if their site experiences downtime, it may affect your accessibility as well.

Answer 14

Although it may not directly address your inquiry, have you considered exploring GitHub? By creating a free account, you can enjoy syntax-colored "gists" that can be shared and hosted on your own webpage.

However, it is important to note that the content will be hosted on GitHub's platform, so if their site experiences downtime, it may affect your accessibility as well.

Answer 15

Answer №8

cdnjs offers the library "SyntaxHighlighter".

Visit Blogger → Template → Edit template. Insert the following code right before closing the body tag and save the template.

An example is provided for Python in the code snippet below.

You can also include script files for other languages from cdnjs.

Code for Syntax Highlighting:

<pre class="brush: py">
    print("Hello, World!")
</pre>

To get scripts for other languages, visit:

https://i.sstatic.net/4HAL6.png

<!-- Syntax highlighter-->
<link href='https://cdnjs.cloudflare.com/ajax/libs/SyntaxHighlighter/3.0.83/styles/shThemeDefault.css' rel='stylesheet'/>
<script src='https://cdnjs.cloudflare.com/ajax/libs/SyntaxHighlighter/3.0.83/scripts/shCore.min.js'/>
<script src='https://cdnjs.cloudflare.com/ajax/libs/SyntaxHighlighter/3.0.83/scripts/shAutoloader.min.js'/>

<!-- For Python -->
<script src='https://cdnjs.cloudflare.com/ajax/libs/SyntaxHighlighter/3.0.83/scripts/shBrushPython.min.js'/>

<!-- Include other languages like JavaScript and PHP -->
<script language='javascript'>
    SyntaxHighlighter.config.bloggerMode = true;
    SyntaxHighlighter.all();
</script>

Answer 16

cdnjs offers the library "SyntaxHighlighter".

Visit Blogger → Template → Edit template. Insert the following code right before closing the body tag and save the template.

An example is provided for Python in the code snippet below.

You can also include script files for other languages from cdnjs.

Code for Syntax Highlighting:

<pre class="brush: py">
    print("Hello, World!")
</pre>

To get scripts for other languages, visit:

https://i.sstatic.net/4HAL6.png

<!-- Syntax highlighter-->
<link href='https://cdnjs.cloudflare.com/ajax/libs/SyntaxHighlighter/3.0.83/styles/shThemeDefault.css' rel='stylesheet'/>
<script src='https://cdnjs.cloudflare.com/ajax/libs/SyntaxHighlighter/3.0.83/scripts/shCore.min.js'/>
<script src='https://cdnjs.cloudflare.com/ajax/libs/SyntaxHighlighter/3.0.83/scripts/shAutoloader.min.js'/>

<!-- For Python -->
<script src='https://cdnjs.cloudflare.com/ajax/libs/SyntaxHighlighter/3.0.83/scripts/shBrushPython.min.js'/>

<!-- Include other languages like JavaScript and PHP -->
<script language='javascript'>
    SyntaxHighlighter.config.bloggerMode = true;
    SyntaxHighlighter.all();
</script>

Answer 17

Answer №9

Check out this solution that I found helpful. Simply insert the following code snippet within the <head>...</head> section of your dynamic Blogger HTML:

<script>
    $(window.blogger.ui()).on('viewitem', function (event, post, element) {
        prettyPrint();
    });
</script>

Answer 18

Check out this solution that I found helpful. Simply insert the following code snippet within the <head>...</head> section of your dynamic Blogger HTML:

<script>
    $(window.blogger.ui()).on('viewitem', function (event, post, element) {
        prettyPrint();
    });
</script>

Answer 19

Answer №10

To implement syntax highlighting in your Blogger theme, go to the theme section and select edit HTML. Add a reference to the Google Prettify CDN within the head tag of the HTML.

Next, include a theme for code snippets below this script. In this example, I have included the Desert theme.

<!--Desert theme-->
<style type='text/css'>pre .atn,pre .kwd,pre .tag{font-weight:700}pre.prettyprint{display:block;background-color:#333}pre .nocode{background-color:none;color:#000}pre .str{color:#ffa0a0}pre .kwd{color:khaki}pre .com{color:#87ceeb}pre .typ{color:#98fb98}pre .lit{color:#cd5c5c}pre .pln,pre .pun{color:#fff}pre .tag{color:khaki}pre .atn{color:#bdb76b}pre .atv{color:#ffa0a0}pre .dec{color:#98fb98}ol.linenums{margin-top:0;margin-bottom:0;color:#AEAEAE}li.L0,li.L1,li.L2,li.L3,li.L5,li.L6,li.L7,li.L8{list-style-type:none}@media print{pre.prettyprint{background-color:none}code .str,pre .str{color:#060}code .kwd,pre .kwd{color:#006;font-weight:700}code .com,pre .com{color:#600;font-style:italic}code .typ,pre .typ{color:#404;font-weight:700}code .lit,pre .lit{color:#044}code .pun,pre .pun{color:#440}code .pln,pre .pln{color:#000}code .tag,pre .tag{color:#006;font-weight:700}code .atn,pre .atn{color:#404}code .atv,pre .atv{color:#060}}</style>

For more themes, visit [Prettify themes](http://www.compromath.com/2017/02/adding-specific-code-syntax-highlighter.html). When creating a post, switch from visual mode to **HTML** editing and navigate to where you want to insert the code snippet. Then paste the code like this:

<pre class="prettyprint">
  <code class="language-html">
      <!-- Your code snippet here -->
  </code>
</pre>

You can customize the code style by choosing different languages like HTML, CSS, PHP, JavaScript, etc. In this example, an **HTML** code snippet is used.

Answer 20

To implement syntax highlighting in your Blogger theme, go to the theme section and select edit HTML. Add a reference to the Google Prettify CDN within the head tag of the HTML.

Next, include a theme for code snippets below this script. In this example, I have included the Desert theme.

<!--Desert theme-->
<style type='text/css'>pre .atn,pre .kwd,pre .tag{font-weight:700}pre.prettyprint{display:block;background-color:#333}pre .nocode{background-color:none;color:#000}pre .str{color:#ffa0a0}pre .kwd{color:khaki}pre .com{color:#87ceeb}pre .typ{color:#98fb98}pre .lit{color:#cd5c5c}pre .pln,pre .pun{color:#fff}pre .tag{color:khaki}pre .atn{color:#bdb76b}pre .atv{color:#ffa0a0}pre .dec{color:#98fb98}ol.linenums{margin-top:0;margin-bottom:0;color:#AEAEAE}li.L0,li.L1,li.L2,li.L3,li.L5,li.L6,li.L7,li.L8{list-style-type:none}@media print{pre.prettyprint{background-color:none}code .str,pre .str{color:#060}code .kwd,pre .kwd{color:#006;font-weight:700}code .com,pre .com{color:#600;font-style:italic}code .typ,pre .typ{color:#404;font-weight:700}code .lit,pre .lit{color:#044}code .pun,pre .pun{color:#440}code .pln,pre .pln{color:#000}code .tag,pre .tag{color:#006;font-weight:700}code .atn,pre .atn{color:#404}code .atv,pre .atv{color:#060}}</style>

For more themes, visit [Prettify themes](http://www.compromath.com/2017/02/adding-specific-code-syntax-highlighter.html). When creating a post, switch from visual mode to **HTML** editing and navigate to where you want to insert the code snippet. Then paste the code like this:

<pre class="prettyprint">
  <code class="language-html">
      <!-- Your code snippet here -->
  </code>
</pre>

You can customize the code style by choosing different languages like HTML, CSS, PHP, JavaScript, etc. In this example, an **HTML** code snippet is used.

Answer 21

Answer №11

My method is straightforward and offers flexibility.

To access your Blogger account, go to Theme → Customize → Advanced → Add CSS.

Next, paste the CSS code provided below.

code {
    font-family: Courier, monospace;
    color: #000;
    background-color: #f8f9fa;
    border: 1px solid #eaecf0;
    border-radius: 2px;
    padding: 1px 4px;
}
pre, .mw-code {
    padding: 5px;
    font-family: Courier, monospace;
    font-size: inherit;
    line-height: 1rem;
    color: #000;
    background-color: #f8f9fa;
    border: 1px solid #eaecf0;
    padding: 1em;
    white-space: pre-wrap;
    overflow-x: hidden;
    word-wrap: break-word;
}

For example, to execute a command like this:

To view the MX record of a domain on Windows <code> nslookup </code> :<br />

<pre>temp = foo
foo = bar
bar = temp
</pre>

Answer 22

My method is straightforward and offers flexibility.

To access your Blogger account, go to Theme → Customize → Advanced → Add CSS.

Next, paste the CSS code provided below.

code {
    font-family: Courier, monospace;
    color: #000;
    background-color: #f8f9fa;
    border: 1px solid #eaecf0;
    border-radius: 2px;
    padding: 1px 4px;
}
pre, .mw-code {
    padding: 5px;
    font-family: Courier, monospace;
    font-size: inherit;
    line-height: 1rem;
    color: #000;
    background-color: #f8f9fa;
    border: 1px solid #eaecf0;
    padding: 1em;
    white-space: pre-wrap;
    overflow-x: hidden;
    word-wrap: break-word;
}

For example, to execute a command like this:

To view the MX record of a domain on Windows <code> nslookup </code> :<br />

<pre>temp = foo
foo = bar
bar = temp
</pre>

Is there a way to integrate Prettify with Blogger/BlogSpot?

Answer №1

Answer №2

Answer №3

Answer №4

Answer №5

Answer №6

Answer №7

Answer №8

Answer №9

Answer №10

Answer №11

Similar questions

Encountered the error message "A property 'split' cannot be read of undefined" while attempting to run a React Native application

The Vue.js development server compiler is hitting a roadblock at 49% progress

Updating views with AJAX after database updates without the use of jQuery via PHP

Error encountered in MySQL and NodeJS: Unable to add new query after invoking quit with transactions

The filter function in JavaScript's Array is malfunctioning on Internet Explorer version 7

When it comes to successful payments, should you use `checkout.session.async_payment_succeeded` or `checkout.session.completed` in the Stripe event?

What is the best way to validate if fields are blank before sending a message using the button?

Click a button to switch the visibility of a section in an

Is there a way to tally up the overall count of digits in a number using TypeScript?

A Vue.js component modifies one store state variable but leaves another unchanged

`res.render when all data queries are completed``

Can a promise be safely resolved more than once?

New update: Adjusting the chart by using the slider to modify the date values on the x-axis

What is the best way to adjust the size of a button using CSS within a ReactJS

Incorporating fresh JSON information into an established database

Is there a way to incorporate a base64 encoded image from a text file into an HTML image?

Encountering issues with ASP.NET WebAPI: When using $.ajax, a 404 error occurs, while using $.getJSON results in an Uncaught

Enhanced Rating System for Asp.Net

Converting a ReadStream to a ReadableStream in NodeJS: A Step-by-Step Guide

How to Load JSON Data Using D3 When Column Definitions are Separated