colorful comment

发表于 2025-06-05

Based on prismjs

Do you want to highlight the code lines? Use colorful comments!

Examples:

import std; // * use cpp20
int main() { // $ basic main func
    std::cout<<"Comments!"<<std::endl; // ^ without include!
}

import os # *

# $ sadly, multiple line comment is not currently supported, but it can support longgggg comments

print("Comments!") # ^ different colors!

Codes

// prism-highlight-comment.js
// * You should add <script src="{{ url_for('/js/prism-highlight-comment.js') }}"></script>
// to footer.
document.addEventListener('DOMContentLoaded', function() {
  const codeBlocks = document.querySelectorAll('pre > code[class*="language-"]');

  codeBlocks.forEach(codeElem => {
    const htmlLines = codeElem.innerHTML.split('\n');

    const newLines = htmlLines.map(lineHtml => {

      if (
        lineHtml.includes('/'+'/ *') ||
        lineHtml.includes('#'+' *')  ||
        lineHtml.includes('%'+' *')
      ) {
        return `<span class="hl-star">${lineHtml}</span>`;
      }
      else if (
        lineHtml.includes('/'+'/ $') ||
        lineHtml.includes('#'+' $')  ||
        lineHtml.includes('%'+' $')
      ) {
        return `<span class="hl-dollar">${lineHtml}</span>`;
      }
      else if (
        lineHtml.includes('/'+'/ ^') ||
        lineHtml.includes('#'+' ^')  ||
        lineHtml.includes('%'+' ^')
      ) {
        return `<span class="hl-caret">${lineHtml}</span>`;
      }
      else {
        return lineHtml;
      }
    });

    let result = newLines.join('\n');

    codeElem.innerHTML = result;
  });
});

/* prism-highlight.css */
/* # * You should add <link rel="stylesheet" href="{{ url_for('/css/highlight-comment.css') }}"> */
/* to header */
/* prism-highlight.css */

/* ==== 1. 对应“星号(*)”的高亮：黄色背景 + 左侧橙黄色色条 ==== */
.hl-star {
  /* 让宽度至少铺满可视区域，但如果内容更长就跟随内容宽度滚动 */
  display: inline-block;
  white-space: pre;          /* 保留所有空格、缩进 */
  min-width: 100%;           /* 至少铺满父容器可视宽度 */
  box-sizing: border-box;    /* padding/border 算进宽度 */

  background-color: rgba(255, 249, 196, 0.5); /* 浅黄色半透明背景 */
  border-left: 3px solid #FBC02D; /* 橙黄色色条 */
  padding-left: 8px;          /* 让代码内容和色条之间留出空隙 */
  margin-left: -11px;         /* 抹平这 8px 的左移 */
}

/* ==== 2. 对应“美元符号($)”的高亮：紫色背景 + 左侧深紫色色条 ==== */
.hl-dollar {
  display: inline-block;
  white-space: pre;
  min-width: 100%;
  box-sizing: border-box;

  background-color: rgba(225, 190, 231, 0.5); /* 淡紫色半透明 */
  border-left: 3px solid #8E24AA; /* 深紫色色条 */
  padding-left: 8px;
  margin-left: -11px;
}

/* ==== 3. 对应“脱字符(^)”的高亮：浅蓝色背景 + 左侧蓝色色条 ==== */
.hl-caret {
  display: inline-block;
  white-space: pre;
  min-width: 100%;
  box-sizing: border-box;

  background-color: rgba(187, 222, 251, 0.5); /* 浅蓝色半透明 */
  border-left: 3px solid #1976D2; /* 深蓝色色条 */
  padding-left: 8px;
  margin-left: -11px;
}

Installation

复制文件

prism-highlight-comment.js → source/js/
prism-highlight.css → source/css/

目录示例

your-hexo-project/
├─ source/
│ ├─ css/
│ │ └─ prism-highlight.css
│ └─ js/
│ └─ prism-highlight-comment.js
└─ themes/
└─ your-theme/
└─ layout/_partial/(head.njk, footer.njk, …)

在 head.njk 引入 CSS

<link rel="stylesheet" href="{{ url_for('/css/prism-highlight.css') }}">

在 footer.njk 引入脚本

<script src="{{ url_for('/js/prism-highlight-comment.js') }}"></script>

生成与预览
```
hexo clean
hexo g
hexo s
```

Usage

C-like：// * // $ // ^
Python / Shell：# * # $ # ^
TeX / LaTeX：% * % $ % ^

对应类与配色

标记	类名	背景	左侧色条
*	hl-star	浅黄	#FBC02D
$	hl-dollar	淡紫	#8E24AA
^	hl-caret	浅蓝	#1976D2

Customization

添加新标记：在 JS 中增 includes() 判断，返回新类；再在 CSS 中写新类样式。
改配色：调整 .hl-* 的 background-color 与 border-left。
改边距：同步修改 padding-left / margin-left 数值。

Troubleshooting

看不到颜色：确认 CSS/JS 文件路径与模板引用一致；检查浏览器开发者工具。
高亮行未铺满：确保 .hl-* 使用 inline-block + min-width:100%。
行内多行注释不支持：脚本仅匹配行注释；多行注释需自行扩展逻辑。

License

This demo is built on top of PrismJS.
Feel free to adapt it for personal or educational use.