luciano/diff2html
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Merge pull request #378 from charguer/update-readme-with-plain-html-example

Browse source 
Update readme with fully worked-out plain html example
This commit is contained in:
Rodrigo Fernandes 2021-04-04 12:00:18 +01:00 committed by GitHub
commit 8fc491c499
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
1 changed files with 50 additions and 2 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

52
README.md
View file

@ -206,7 +206,55 @@ document.getElementById('destination-elem-id').innerHTML = diffHtml;
### Diff2Html Examples
#### Diff2Html Angular Example
#### Diff2Html Example using plain HTML/JS
```html
<!DOCTYPE html>
<html lang="en-us"><head>
<meta charset="utf-8">
<!--Make sure to load the CSS file in that order-->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/10.7.1/styles/github.min.css" />
<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/diff2html/bundles/css/diff2html.min.css" />
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/diff2html/bundles/js/diff2html-ui.min.js"></script>
</head>
<script>
const diffString = `diff --git a/sample.js b/sample.js
index 0000001..0ddf2ba
--- a/sample.js
+++ b/sample.js
@@ -1 +1 @@
-console.log("Hello World!")
+console.log("Hello from Diff2Html!")`;
document.addEventListener('DOMContentLoaded', function () {
var targetElement = document.getElementById('myDiffElement');
var configuration = {
inputFormat: 'json',
drawFileList: true,
fileListToggle: false,
fileListStartVisible: false,
fileContentToggle: false,
matching: 'lines',
outputFormat: 'side-by-side',
synchronisedScroll: true,
highlight: true,
renderNothingWhenEmpty: false };
var diff2htmlUi = new Diff2HtmlUI(targetElement, diffString, configuration);
diff2htmlUi.draw();
diff2htmlUi.highlightCode();
});
</script>
<body>
<div id="myDiffElement"></div>
</body>
</html>
```
#### Diff2Html Example using Angular
- Typescript
@ -253,7 +301,7 @@ export class AppDiffComponent implements OnInit {
]
```
#### Diff2Html Vue.js Example
#### Diff2Html Example using Vue.js
```vue
<template>