example

Author: MrWangJustToDo

ui/react-example/src/components/MainContentDiffExampleCode.tsx

@@ -11,15 +11,15 @@ const getCode = ({ theme, type }: { theme: "light" | "dark"; type: "react" | "vu
 import { generateDiffFile } from "@git-diff-view/file";
 import "@git-diff-view/react/styles/diff-view.css";
 
-// git mode
+// git mode, use \`git diff\` output to render
 const getDiffFile = () => {
   // see https://git-scm.com/docs/git-diff
   const instance = new DiffFile(oldFileName, oldContent, newFileName, newContent, [ git diff output string ]);
   instance.initRaw();
   return instance;
 }
 
-// file mode
+// file mode, use \`string content\` to render
 const getDiffFile = () => {
   const instance = generateDiffFile(oldFileName, oldContent, newFileName, newContent, '', '');
   instance.initRaw();
@@ -36,15 +36,15 @@ const App = () => {
   import { generateDiffFile } from "@git-diff-view/file";
   import "@git-diff-view/vue/styles/diff-view.css";
 
-  // git mode
+  // git mode, use \`git diff\` output to render
   const getDiffFile = () => {
     // see https://git-scm.com/docs/git-diff
     const instance = new DiffFile(oldFileName, oldContent, newFileName, newContent, [ git diff output string ]);
     instance.initRaw();
     return instance;
   }
 
-  // file mode
+  // file mode, use \`string content\` to render
   const getDiffFile = () => {
     const instance = generateDiffFile(oldFileName, oldContent, newFileName, newContent, '', '');
     instance.initRaw();

ui/vue-example/src/App.vue

@@ -110,7 +110,7 @@ const resetV = () => (v.value = "");
       </button>
     </div>
   </div>
-  <div class="m-auto mb-[5em] w-[90%] overflow-hidden rounded-[5px] border border-solid border-[#c1c1c1]">
+  <div class="m-auto mb-[5em] w-[90%] overflow-hidden rounded-[5px] border border-solid border-[#e1e1e1]">
     <DiffView
       :diff-file="diffFile"
       :diff-view-font-size="14"