prism - 网页代码高亮（以Typecho为例）

发表于 更新于 本文字数： 696 阅读时长 ≈ 3 分钟

Typecho默认不支持代码高亮标记功能，而prism可以实现美观的代码高亮标记效果。

prism - 网页代码高亮（以Typecho为例）

1 prism

1.1 prism简介

prismjs.com

Prism is a lightweight, extensible syntax highlighter, built with modern web standards in mind. It’s used in thousands of websites, including some of those you visit daily.

1.2 尝试主题

Prism提供default, dark, funky, okaidia, twilight, coy, solarized light多种主题配色。点击右边的主题即可在下方的预览frame内预览效果。

1.3 下载

1.3.1 选择

  • Compression level
    • 压缩度
    • Development Version 即开发版，压缩率低，可读性好，适合阅读和修改开发。
    • Minified Version即缩小化版本，适合直接使用。
  • Theme
    • 略，选择一个即可
    • 注意，主题不仅包含文字高亮即配色，还包含背景配色。
  • Languages
    • 选择自己需要实现高亮标记效果的语言即可
  • Plugins
    • 一些功能性插件

1.3.2 下载

  • JS和CSS都要下载，会得到prism.js 和 prism.css
  • JS和CSS是根据你的选择，合并生成的两份文件（javascript脚本及层叠样式表）。

2 配置Typecho

2.1 上传prism

  • 找到你当前使用的主题（theme）目录
  • 以我的为例：
    • 路径为/var/www/html/usr/themes/typecho-theme-next
    • 则将prism.js上传到/var/www/html/usr/themes/typecho-theme-next/js/
    • 将prism.css上传到/var/www/html/usr/themes/typecho-theme-next/css/

2.2 添加调用代码

  • 修改当前主题的header.php

  • 添加调用声明

  • ```html 

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38

    - 添加位置如下示例：

    - ```php
      <?php
      if (!defined('__TYPECHO_ROOT_DIR__')) exit;
      //当cdn加速开启时候定义cdn的地址
      if (!empty($this->options->next_cdn) && $this->options->next_cdn){
      }
      ?><!doctype html>
      <head>
          <meta charset="<?php $this->options->charset(); ?>">
          <meta http-equiv="X-UA-Compatible" content="IE=edge, chrome=1">
          <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1"/>
          <meta http-equiv="Cache-Control" content="no-transform" />
      <?php
      if (!defined('__TYPECHO_ROOT_DIR__')) exit;
      //当cdn加速开启时候定义cdn的地址
      if (!empty($this->options->next_cdn) && $this->options->next_cdn){
      }
      ?><!doctype html>
      <head>
          <meta charset="<?php $this->options->charset(); ?>">
          <meta http-equiv="X-UA-Compatible" content="IE=edge, chrome=1">
          <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1"/>
          <meta http-equiv="Cache-Control" content="no-transform" />
          <meta http-equiv="Cache-Control" content="no-siteapp" />
          <!-- 使用url函数转换相关路径 -->
          <!-- <link rel="stylesheet" type="text/css" href="//fonts.googleapis.com/css?family=Lato:300,400,700,400italic&subset=latin,latin-ext"/> -->
          <link rel="stylesheet" type="text/css" href="<?php $this->options->themeUrl('/vendors/fancybox/source/jquery.fancybox.css?v=2.1.5'); ?>"/>
          <link rel="stylesheet" type="text/css" href="<?php $this->options->themeUrl('/vendors/font-awesome/css/font-awesome.min.css?v=4.4.0'); ?>"/>
          <link rel="stylesheet" type="text/css" href="<?php $this->options->themeUrl('/css/main.css?v=1.2.1'); ?>"/>
         
          <!-- prism code highlight -->
          <link rel="stylesheet" href="<?php $this->options->themeUrl('css/prism.css'); ?>" />
          <script src="<?php $this->options->themeUrl('js/prism.js'); ?>"></script>
         
          <script type="text/javascript" id="hexo.configuration">

  • done!

3 书写方式

3.1 触发方式

在Markdown文档的代码段部分开头做上标记，写上当前语言即可，如：python

1
2
3
4
5
6
​```python
import os
import requests

print("String highlight")
​```

效果如下：

1
2
3
4
import os
import requests

print("String highlight")