给 Blogger 添加代码高亮

blogger默认不支持高亮，可以引用prismjs实现。

配置主题

prism 支持 8 种样式，可以在官网上看到演示：https://prismjs.com/

然后在 CDN 中找到对应的样式及要支持的语言链接添加至主题配置中。

比如我要添加默认的样式 以及css，js 和 java 高亮支持，在编辑主题中引入以下代码：

<!-- Syntax Highlighter Additions START -->
<script src="https://cdn.bootcss.com/prism/9000.0.1/prism.min.js"></script>
<script src="https://cdn.bootcss.com/prism/9000.0.1/components/prism-java.min.js"></script>
<script src="https://cdn.bootcss.com/prism/9000.0.1/components/prism-bash.min.js"></script>
<link href='https://cdn.bootcss.com/prism/9000.0.1/themes/prism.min.css' rel='stylesheet'/>
<!-- Syntax Highlighter Additions END -->

如下图所示：

修改引言样式

默认的引用样式很难看，顺便也改一下，添加如下：

<style>
blockquote {
    margin: 1em 0.1em;
    padding: .5em 1em;
    text-align: left;
    font-size: medium;
    border-left: 5px solid #fce27c;
    background-color: #f6ebc1; }
blockquote p {
    margin: 0; }
</style>

这是使用效果

高亮使用方式

在 code 标签中 添加相应的 language-xxx 类即可，比如：

<pre>
    <code class="language-css">
        p { color: red }
    </code>
</pre>

Bash

mkdir /oldboy
cd /oldboy
echo $(pwd) && \
source /etc/init.d/functions

for i in oldboy{01..10}
do
useradd $i &>/dev/null
if [ $? -eq 0 ]
then
action "$i" /bin/true
echo $(uuidgen|tr '0-9' 'a-z'|cut -c 1-10 )|passwd --stdin $i &>/dev/null
echo $i $(uuidgen|tr '0-9' 'a-z'|cut -c 1-10) >>/tmp/passwd.txt
else
action "$i" /bin/false
fi
done```

text

private static final DateTimeFormatter format = DateTimeFormatter.ofPattern("dd-MM-yyyy HH:mm");
private static final ZoneId zone = ZoneId.systemDefault();
LocalDateTime datetime = LocalDateTime.parse("19-04-2019 00:00", format);
LocalDateTime lastdate = LocalDateTime.ofInstant(new Date().toInstant(), zone);

Java

private static final DateTimeFormatter format = DateTimeFormatter.ofPattern("dd-MM-yyyy HH:mm");
private static final ZoneId zone = ZoneId.systemDefault();
LocalDateTime datetime = LocalDateTime.parse("19-04-2019 00:00", format);
LocalDateTime lastdate = LocalDateTime.ofInstant(new Date().toInstant(), zone);

JavaScrapt

// 纯参数
let params_str = 'name=zhangsan&age=13&token=kkkkk'
let params_map = parseUrlParams(params_str)
console.log(params_map.name)
console.log(params_map.age)
if (map.has('token')) throw Error('token 不存在')
console.log(params_map.token)
// 带地址参数
let params_str = 'http://pianduan.fun/user?name=zhangsan&age=13&token=kkkkk'
let params_map = parseUrlParams(params_str)
console.log(params_map.name)
console.log(params_map.age)
if (map.has('token')) throw Error('token 不存在')
console.log(params_map.token)

/**
 * 地址参数转 Map
 * @param {String} params_str
 */
function parseUrlParams(params_str) {
  if (params_str.startsWith('http')) {
    params_str = params_str.split('?')[1]
  }
  let map = new Map()
  let params = params_str.split('&')
  for (const str of params) {
    let key = str.split('=')[0]
    let value = str.split('=')[1]
    map.set(key, value)
  }
  return map
}

CSS

/*竖向滑动*/
overflow-y: scroll;
overflow-x: hidden;
/*解决ios上滑动不流畅*/
-webkit-overflow-scrolling: touch;
/*横向滑动*/
overflow-y: hidden;
overflow-x: scroll;
/*解决ios上滑动不流畅*/
-webkit-overflow-scrolling: touch;