feat: classNames config

Author: Arman19941113

.github/workflows/github-ci.yml

@@ -19,15 +19,15 @@ jobs:
     steps:
 
       - name: Checkout
-        uses: actions/checkout@v3
+        uses: actions/checkout@v4
 
       - name: Set up pnpm
-        uses: pnpm/action-setup@v2
+        uses: pnpm/action-setup@v4
         with:
           version: 9
 
       - name: Set up node
-        uses: actions/setup-node@v3
+        uses: actions/setup-node@v4
         with:
           node-version: 20
           cache: 'pnpm'
@@ -42,13 +42,13 @@ jobs:
         run: pnpm run build
 
       - name: Build example
-        run: cd examples/basic && pnpm run build
+        run: cd examples/basic && pnpm run build --base=/html-diff/
 
       - name: Upload artifact
-        uses: actions/upload-pages-artifact@v1
+        uses: actions/upload-pages-artifact@v3
         with:
           path: 'examples/basic/dist'
 
       - name: Deploy to GitHub Pages
         id: deployment
-        uses: actions/deploy-pages@v1
+        uses: actions/deploy-pages@v4

README.md

@@ -1,6 +1,6 @@
 # Html Diff
 
-Generate HTML content with unified or side-by-side differences.
+Compare HTML and generate the differences in either a unified view or a side-by-side comparison.
 
 ## Install
 
@@ -22,13 +22,30 @@ const unifiedContent = diff.getUnifiedContent()
 const sideBySideContents = diff.getSideBySideContents()
 ```
 
-## Preview
+You can use your own styles without import the css file
 
-### unified differences
+```js
+import HtmlDiff from '@armantang/html-diff'
 
-![home](https://arman19941113.github.io/html-diff/unified.png)
+const oldHtml = `<div>hello</div>`
+const newHtml = `<div>hello world</div>`
+const diff = new HtmlDiff(oldHtml, newHtml, {
+  minMatchedSize: 3,
+  classNames: {
+    createText: 'cra-txt',
+    deleteText: 'del-txt',
+    createInline: 'cra-inl',
+    deleteInline: 'del-inl',
+    createBlock: 'cra-blo',
+    deleteBlock: 'del-blo',
+  },
+})
+const unifiedContent = diff.getUnifiedContent()
+const sideBySideContents = diff.getSideBySideContents()
+```
 
-### side-by-side differences
+## Preview
 
-![home](https://arman19941113.github.io/html-diff/sidebyside.png)
+[See online demo...](https://arman19941113.github.io/html-diff/)
 
+![home](https://arman19941113.github.io/html-diff/demo.png)

doc/sidebyside.png

@@ -16,7 +16,7 @@ export default function useInputData() {
 <p>今天和明天已经由昨天决定，你还可以决定后天。</p>
 <p>只有当你离开自己的舒适区时，你才会挑战自己的极限。</p>
 <p>一本有价值的书就是一盏智慧之灯，总有人不断从中提取光明。</p>
-<img src="src/assets/dog.jpg" alt="dog">
+<img src="assets/dog.jpg" alt="dog">
 <h2>Try video</h2>
 <video style="width: 100%;" controls>
   <source src="https://www.w3schools.com/html/mov_bbb.mp4" type="video/mp4">
@@ -36,7 +36,7 @@ export default function useInputData() {
 <p>无休止的欲望像个黑洞，浸染了我们原本澄澈而简单的心</p>
 <p>只有当你离开自己的舒适区时，你才会挑战自己的极限。</p>
 <p>一本有价值的书就是一盏智慧之灯，总有人不断从中提取光明。</p>
-<img src="src/assets/cat.jpg" alt="cat">
+<img src="assets/cat.jpg" alt="cat">
 <h2>Try video</h2>
 <h2>Set the bird's wings with gold and it will never again soar in the sky.</h2>
 <video style="width: 100%;" controls src="https://www.w3schools.com/html/mov_bbb.mp4" type="video/mp4"></video>`)