hexo-highlight-mark v1.1.3

介绍

本插件将会修改<pro code>的基本结构，以实现高亮行的功能

结构介绍

<div class="codeBlockConatiner">
    <div class="codeBlockTitle"></div>
    <div class="codeBlockContent">
        <pre class="highlight">
            <code class="language-python codeBlockLines">
                <span class="line">
                <span class="line marked">
                ...
            </code>
        </pre>
    </div>
</div>

语法

基本语法为

luanguage title {mark}

在代码块中可以加入以下注释起到高亮的作用

• highlight-next-line
• highlight-start
• highlight-end

使用方法

npm install -g hexo-highlight-mark

修改配置文件_config.yml：

highlight:
  enable: true
  line_number: true
  auto_detect: true
  tab_replace: ''
  wrap: true
  hljs: true

如果使用的是3-hexo的主题 1. 将3-hexo/layout/_partial/meta.ejs文件中的hljs.initHighlightingOnLoad();行注释掉 2. 将3-hexo/source/js/script.js文件中的hljs.highlightBlock(block);行注释掉 3. 将3-hexo的配置文件3-hexo/_config.yml中的highlight开启

推荐CSS

#post
  .pjax
    article
      .codeBlockContainer
        background-color: #b6c6d024;
        border-radius: 10px;
      .codeBlockTitle
        border-bottom: 2px solid #dadde1;
        border-top-left-radius: 5px;
        border-top-right-radius: 5px;
        font-weight: 500;
        padding: 10px 15px;
        margin-bottom: -15px;
        font-family: Menlo, Monaco, Consolas, Courier New, monospace;
      .codeBlockLines
        display: flex;
        flex-direction: column;
        border-radius: 10px;
        background-color: #b6c6d024;
        overflow-x: auto;
        .marked
          background-color: #dddfe1;
          margin: 0px -15px;
          padding: 0px 15px;