Skip to content

Commit 29e992a

Browse files
authored
Merge pull request #60 from rtfpessoa/doc-custom-template
Improve custom template docs
2 parents 3180f25 + acb316e commit 29e992a

1 file changed

Lines changed: 35 additions & 7 deletions

File tree

README.md

Lines changed: 35 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -75,7 +75,40 @@ Usage: diff2html [options] -- [diff args]
7575
| -v | --version | Show version number | | |
7676
| -h | --help | Show help | | |
7777

78-
Examples:
78+
### Custom HTML wrapper template
79+
80+
The template is a very based on a simple replace of several placeholders as coded https://github.com/rtfpessoa/diff2html-cli/blob/master/src/cli.ts#L40
81+
82+
To provide a custom template you need to make sure you have the following comments and imports in your HTML, exactly as they are here:
83+
84+
* Inside the `<head>` tag
85+
86+
```
87+
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/9.9.0/styles/github.min.css" />
88+
<!--diff2html-css-->
89+
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.3/jquery.js"></script>
90+
<script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/9.9.0/highlight.min.js"></script>
91+
<script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/9.9.0/languages/scala.min.js"></script>
92+
<!--diff2html-js-ui-->
93+
<script>
94+
$(document).ready(function() {
95+
var diff2htmlUi = new Diff2HtmlUI();
96+
//diff2html-fileListCloseable
97+
//diff2html-synchronisedScroll
98+
//diff2html-highlightCode
99+
});
100+
</script>
101+
```
102+
103+
* Inside the `<body>` tag
104+
105+
```
106+
<div id="diff">
107+
<!--diff2html-diff-->
108+
</div>
109+
```
110+
111+
### Examples:
79112

80113
`diff2html -s line -f html -d word -i command -o preview -- -M HEAD~1`
81114
- diff last commit, line by line, word comparison between lines, previewed in the browser and input from git diff command
@@ -93,12 +126,7 @@ Examples:
93126
- print to file
94127

95128
`diff2html -F my-pretty-diff.html --hwt my-custom-template.html -- -M HEAD~1`
96-
- print to file using custom markup templates can include the following variables:
97-
- `<!--diff2html-css-->` - writes default CSS to page
98-
- `<!--diff2html-js-ui-->` - writes default JavaScript UI scripts to page
99-
- `//diff2html-fileListCloseable` - writes code to support selected list interaction, must be within a `<script>` block
100-
- `//diff2html-synchronisedScroll` - writes code to support selected scroll interaction, must be within a `<script>` block
101-
- `<!--diff2html-diff-->` - writes diff content to page
129+
- print to file using custom markup templates can include the following variables
102130

103131
`diff2html --ig package-lock.json --ig yarn.lock`
104132
- Ignore `package-lock.json` and `yarn.lock` from the generated diff

0 commit comments

Comments
 (0)