Sunday, April 3, 2022

在Google blogger中显示程序代码块

 我是用这个插件https://github.com/googlearchive/code-prettify来显示代码块的。

采用的方法如下:

1. 进入blogger后台的Layout选项。

2. 点击Add a Gadget。

3. 选择HTML/JaveScript选项。

4. 加入code-prettify的代码。

<script src="https://cdn.jsdelivr.net/gh/google/code-prettify@master/loader/run_prettify.js"></script>

5. 编辑博客的时候,切换到HTML模式,用一下方式添加代码。

<pre class="prettyprint">source code here</pre>
<code class="prettyprint">source code here</code>

6. 代码样式可以到Clolor Themes for Google Code Prettify选择一个喜欢的主题,点选CSS复制到刚才的HTML/JavaScript小工具中,粘粘到script的上方,并用<style></style>标签包起来。 

 

Reference:

http://peggyloveslearning.blogspot.com/2017/04/google-blogger.html 

https://jmblog.github.io/color-themes-for-google-code-prettify/

https://demo.smarttutorials.net/html-xml-adsense-parser/ 

https://github.com/googlearchive/code-prettify

Saturday, March 19, 2022

在Google Blogger中显示Latex数学公式

最近突然想开始写博客, 选来选去觉得blogger平台不错, 自己也开始学习blogger平台的各种设置, 我会把这期间遇到的问题和解决过程记录下来, 方便以后参考.

想要在blogger中用Latex显示数学公式, 需要调用MathJax.

在blogger中调用MathJax步骤如下:

1. 进入blogger的版面配置界面, 选Theme→Customize→Edit HTML.

2. 把下面的程序插入到<head>标签内, 我是插入到</head>前一行.

<script src="https://polyfill.io/v3/polyfill.min.js?features=es6"></script>
<script type="text/javascript" id="MathJax-script" async src="https://cdn.jsdelivr.net/npm/mathjax@3/es5/tex-mml-chtml.js"></script>
<script>
window.MathJax = {
  tex: {
    inlineMath: [ ['$','$'],['\\(','\\)'] ],
    displayMath: [ ['$$','$$'], ['\\[','\\]'] ],
    processEscapes: true,      
    processEnvironments: true, 
    processRefs: true       
  },
  options: {
   ignoreHtmlClass: 'tex2jax_ignore|editor-rich-text'
  }
};
</script>

3. 点击save.

使用MathJax在页面显示数学公式:

 1. 行间公式, 使用$...$来显示数学公式:

       输入: $a^2=b^2+c^2$

       输出: $a^2=b^2+c^2$

 2. 行间公式,使用$$...$$来显示数学公式:

        输入: $$E=mc^2$$

        输出: $$E=mc^2$$

Resources: 

Write LaTeX using MathJax

Getting Started with MathJax Components