feat: highlightjs-diff — support code changes on posts (#303)

feat: `highlightjs-diff` — support code changes on posts

Author: EmptyWork

.eleventy.js

@@ -2,7 +2,8 @@ import fs from "fs"
 import path from "path"
 import dotenv from "dotenv"
 import { DateTime } from "luxon"
-import hljs from "highlight.js"
+import highlight from "highlight.js"
+import highlightDiff from "highlightjs-code-diff"
 import markdownIt from "markdown-it"
 import anchor from "markdown-it-anchor"
 import bracketedSpans from "markdown-it-bracketed-spans"
@@ -16,14 +17,17 @@ dotenv.config()
 
 export default function (eleventyConfig) {
   const isDevelopment = process.env.NODE_ENV === "development"
+  const hljs = highlightDiff(highlight)
   const markdownItConfig = markdownIt({
     html: true,
     linkify: true,
     typographer: true,
     highlight: function (str, lang) {
-      if (lang && hljs.getLanguage(lang)) {
+      const processLang = lang.replace("diff:", "")
+      if (lang && hljs.getLanguage(processLang)) {
         try {
-          return hljs.highlight(str, { language: lang }).value
+          const returnValue = hljs.highlight(str, { language: lang }).value
+          return returnValue
         } catch (__) { }
       }
       return ""

package-lock.json

@@ -45,6 +45,7 @@
     "dotenv": "^16.5.0",
     "glob": "^11.0.3",
     "highlight.js": "^11.5.1",
+    "highlightjs-code-diff": "^1.0.0",
     "markdown-it-anchor": "^9.2.0",
     "markdown-it-attrs": "^4.1.4",
     "markdown-it-bracketed-spans": "^1.0.1",

package.json

@@ -23,7 +23,7 @@ tags:
 >
 > > `this is an inline-quote` does it works? click here to [jump to code-snippet-2](#code-snippet-2), or you can just scroll down, also you can hover on the code blocks.
 > >
-> > ```npm
+> > ```bash
 > > npm run install && npm run update
 > > ```
 > >
@@ -43,6 +43,7 @@ The markdown is being handle by the markdown-it and eleventy, while some extra w
 ```sql
 SELECT * FROM `ikan`;
 ```
+
 ```sql
 DROP table `ikan`;
 ```
@@ -70,7 +71,7 @@ console.log(add(2, 3)) // Output: 5
 
 Here is a simple JavaScript function that adds two numbers and logs the result.
 
-```javascript
+```js
 const schedulerLoader = (schedules = {}) => {
   let time = new Date()
   let currentTime = time.getUTCHours() + 9
@@ -95,6 +96,37 @@ const schedulerLoader = (schedules = {}) => {
 }
 ```
 
+```diff:js
+const schedulerLoader = (schedules = {}) => {
+  let time = new Date()
+  let currentTime = time.getUTCHours() + 9
+  if (currentTime > 23) currentTime -= 23
+
+  if (replaceStatus) replaceStatus.textContent = 'Idle'
+-  setTimeout(() => throw new Error(),0)
++  setTimeout(() => {
++    for (let i = 0; i < schedules.length; i++) {
++      let { day, endHour, startHour } = schedules[i]
++      if (!replaceStatus) return
++
++      if (days[currentDay] === toCapitalizeWord(day)) {
++        if (currentTime > startHour && currentTime < endHour) {
++          replaceStatus.textContent = 'Studying'
++        }
++        break
++      }
++      replaceStatus.textContent = 'Idle'
++    }
++  }, 0)
+```
+
+```md
+├─ docs
+│  ├─ .vuepress
+│  │  └─ config.js
+│  └─ README.md
+└─ package.json
+```
 And this is an example of markdown list:
 
 ```md
@@ -115,7 +147,6 @@ And this is an example of markdown list:
   2. what
   3. don't worry
 
-
 #### Code snippet 3
 
 ```js

src/articles/blog/2021-12-26-formatting-testing.md

@@ -0,0 +1,139 @@
+pre code.hljs {
+    display: block;
+    overflow-x: auto;
+    padding: 1em
+}
+
+code.hljs {
+    padding: 3px 5px
+}
+
+/*!
+  Theme: Tokyo-night-Dark
+  origin: https://github.com/enkia/tokyo-night-vscode-theme
+  Description: Original highlight.js style
+  Author: (c) Henri Vandersleyen <hvandersleyen@gmail.com>
+  License: see project LICENSE
+  Touched: 2022
+*/
+.hljs-comment,
+.hljs-meta {
+    color: #565f89
+}
+
+.hljs-deletion,
+.hljs-doctag,
+.hljs-regexp,
+.hljs-selector-attr,
+.hljs-selector-class,
+.hljs-selector-id,
+.hljs-selector-pseudo,
+.hljs-tag,
+.hljs-template-tag,
+.hljs-variable.language_ {
+    color: #f7768e
+}
+
+.hljs-link,
+.hljs-literal,
+.hljs-number,
+.hljs-params,
+.hljs-template-variable,
+.hljs-type,
+.hljs-variable {
+    color: #ff9e64
+}
+
+.hljs-attribute,
+.hljs-built_in {
+    color: #e0af68
+}
+
+.hljs-keyword,
+.hljs-property,
+.hljs-subst,
+.hljs-title,
+.hljs-title.class_,
+.hljs-title.class_.inherited__,
+.hljs-title.function_ {
+    color: #7dcfff
+}
+
+.hljs-selector-tag {
+    color: #73daca
+}
+
+.hljs-addition,
+.hljs-bullet,
+.hljs-quote,
+.hljs-string,
+.hljs-symbol {
+    color: #9ece6a
+}
+
+.hljs-code,
+.hljs-formula,
+.hljs-section {
+    color: #7aa2f7
+}
+
+.hljs-attr,
+.hljs-char.escape_,
+.hljs-keyword,
+.hljs-name,
+.hljs-operator {
+    color: #bb9af7
+}
+
+.hljs-punctuation {
+    color: #c0caf5
+}
+
+.hljs {
+    background: #1a1b26;
+    color: #9aa5ce
+}
+
+.hljs-emphasis {
+    font-style: italic
+}
+
+.hljs-strong {
+    font-weight: 700
+}
+
+/*!
+  Author: (c) EmptyWork <contact@emptywork.my.id>
+  Touched: 2025
+
+  Additional styling for diff support
+*/
+
+.hljs-addition,
+.hljs-deletion {
+    --_distance: 1em;
+    --_border: 0em;
+    --_offset: 0.61875em;
+    display: inline-block;
+    width: calc(100% + calc(var(--_distance) * 2));
+    margin-inline: calc(var(--_distance) * -1);
+    padding-inline: 1em;
+    padding-left: calc(0.5em - var(--_border) + var(--_offset));
+}
+
+.hljs-addition,
+.hljs-deletion {
+    --_border: 0.25em;
+    --_offset: 0em;
+    --_color: 349, 89%, 72%;
+    background-color: hsl(var(--_color), 0.2);
+    border-left: var(--_border) solid hsl(var(--_color), 0.2);
+}
+
+.hljs-addition {
+    --_color: 89, 51%, 61%;
+}
+
+.hljs-deletion {
+    --_color: 349, 89%, 72%;
+}