背景

• 在使用 marked 和 highlight.js 时，发现 highlight.js 对代码块中行号不是很友好，导致行号不太好展示

• 因此，基于 highlight.js 的元素基础上，封装自定义指令，使其支持行号展示

使用

1. 安装

npm install highlight-md-cp
yarn add highlight-md-cp

2. 引入

// main.ts vue3
import { createApp } from "vue";
import highLight from "highlight-md-cp";
const app = createApp();
app.use(highLight);

/* style.css */
.hljs-ln-numbers {
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;

  text-align: center;
  color: #ccc;
  border-right: 1px solid #ccc;
  vertical-align: top;
  padding-right: 5px;

  /* your custom style here */
}
/* for block of code */
.hljs-ln-code {
  padding-left: 10px;
}
.markdown-body table tr {
  border: none;
  background-color: transparent;
  font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas,
    "Liberation Mono", monospace;
  font-size: 15px;
}
.markdown-body table td {
  border: none;
  background-color: transparent;
  font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas,
    "Liberation Mono", monospace;
  font-size: 15px;
}
.markdown-body table th {
  border: none;
  background-color: transparent;
  font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas,
    "Liberation Mono", monospace;
  font-size: 15px;
}

3. 使用

<template>
  <div class="markdown-body" v-highlight="code"></div>
</template>