How to use prettify with blogger/blogspot?

2019-01-16 02:55发布

站内问答 / JavaScript
499 10 3

I'm using blogger.com to host some texts on programming, and I'd like to use prettify (same as stackoverflow) to nicely colour the code samples.

How do I install the prettify scripts into the blog domain?
Would it be better (if indeed its possible) to link to a shared copy somewhere?
I have webspace on a different domain. Would that help?

Many thanks.

10条回答
孤傲高冷的网名
2楼-- · 2019-01-16 03:32

cdnjs providing the library "SyntaxHighlighter"

got to blogger >> template >> edit template add below code just before ending of the body tag and save template.
I have given Example for python.
you can link the other language script files from cdnjs. syntax highlight code

<pre class="brush: py">
    print("hello world")
</pre>

for other languages go and copy script: https://cdnjs.com/libraries/SyntaxHighlighter

enter image description here

<!-- 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, php -->
<script language='javascript'> 
    SyntaxHighlighter.config.bloggerMode = true;
    SyntaxHighlighter.all(); 
</script>
查看更多
0人赞 添加讨论(0) 举报
欢心
3楼-- · 2019-01-16 03:38

Not a direct answer to your question, but worth consider GitHub. You can get a free account and get syntax colored "gists" which you can share and host on your web page.

The downside is that the copy is hosted on Github's site and if that's down, then it's down for you too.

查看更多
0人赞 添加讨论(0) 举报
Luminary・发光体
4楼-- · 2019-01-16 03:44

Have a look at SyntaxHightlighter at http://alexgorbatchev.com/wiki/SyntaxHighlighter On that site you can also find instructions on how to use it at blogger.com and the site offers a hosted version of the required scripts so you don't need to host files somewhere yourself.

查看更多
0人赞 添加讨论(0) 举报
疯言疯语
5楼-- · 2019-01-16 03:45

Go to blogger theme section and click on edit HTML.. Then add the Google Prettify CDN to the head tag of the HTML.

https://cdn.rawgit.com/google/code-prettify/master/loader/run_prettify.js'/>

Then include a theme for code snippet below this script..I included 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 here.. Prettify themes

When you create a post, change the edit mode from visual to HTML and go to the place where you are going to add the code snippet. Then include the code like this.

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

You can change the code style by selecting relevant languages html, css, php, javascript... Here I used a html code snippet.

查看更多
0人赞 添加讨论(0) 举报
Emotional °昔
6楼-- · 2019-01-16 03:47

Nowadays, Google-Code-Prettify has an Auto-Loader script. You can load the JavaScript and CSS for prettify via one URL.

Add the script to the <head> section of your Blogger template and it will work on all your posts:

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

More detail here: http://code.google.com/p/google-code-prettify/wiki/GettingStarted

查看更多
0人赞 添加讨论(0) 举报
We Are One
7楼-- · 2019-01-16 03:48

Another solution is to use the syntaxhighlighter 2.0 java script library. I've used it on my blog and it seems to work quite well.

Here's a post about it:

http://www.craftyfella.com/2010/01/syntax-highlighting-with-blogger-engine.htmllink text

Cheers.

查看更多
0人赞 添加讨论(0) 举报
1 2 下一页
登录 后发表回答
相关问题
查看全部
相关文章
查看全部
收藏的人(3)