### Full Diff2HtmlUI Example with Syntax Highlighting
Source: https://github.com/rtfpessoa/diff2html/blob/master/README.md
Complete JavaScript example demonstrating how to initialize Diff2HtmlUI with a sample diff string, draw it, and then explicitly apply syntax highlighting to the code.
```js
document.addEventListener('DOMContentLoaded', () => {
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!")`;
const targetElement = document.getElementById('myDiffElement');
const configuration = { drawFileList: true, matching: 'lines', highlight: true };
const diff2htmlUi = new Diff2HtmlUI(targetElement, diffString, configuration);
diff2htmlUi.draw();
diff2htmlUi.highlightCode();
});
```
--------------------------------
### Toggle Diff2HtmlUI File List Visibility
Source: https://github.com/rtfpessoa/diff2html/blob/master/README.md
JavaScript example demonstrating how to initialize Diff2HtmlUI and then programmatically toggle the visibility of the file summary list after drawing the diff.
```js
document.addEventListener('DOMContentLoaded', () => {
const targetElement = document.getElementById('myDiffElement');
var diff2htmlUi = new Diff2HtmlUI(targetElement, lineDiffExample, { drawFileList: true, matching: 'lines' });
diff2htmlUi.draw();
diff2htmlUi.fileListToggle(false);
});
```
--------------------------------
### Render Diff with Diff2Html in Plain HTML and JavaScript
Source: https://github.com/rtfpessoa/diff2html/blob/master/README.md
This example demonstrates how to integrate Diff2Html into a basic HTML page using CDN links. It shows how to define a diff string, configure the Diff2HtmlUI component, and render the diff into a specified HTML element upon DOM content loaded. It also highlights the necessary CSS and JS dependencies for styling and functionality.
```html
```
--------------------------------
### Import Highlight.js and Diff2HtmlUI for Syntax Highlighting
Source: https://github.com/rtfpessoa/diff2html/blob/master/README.md
HTML snippet demonstrating the correct order of CSS imports for Highlight.js and Diff2HtmlUI to ensure proper syntax highlighting of code within the diffs.
```html
```
--------------------------------
### Import Highlight.js Themes for Auto Color Scheme
Source: https://github.com/rtfpessoa/diff2html/blob/master/README.md
HTML snippet showing how to include both light and dark themes for Highlight.js, enabling automatic color scheme switching based on the user's system preferences.
```html
```
--------------------------------
### Generate HTML Diff using Diff2Html in Node.js
Source: https://github.com/rtfpessoa/diff2html/blob/master/README.md
This example illustrates how to use Diff2Html in a Node.js or NPM project. It shows how to `require` the library, parse a unified diff string into a JSON object, and then convert that JSON into a human-readable HTML diff.
```JavaScript
const Diff2html = require('diff2html');
const diffJson = Diff2html.parse('');
const diffHtml = Diff2html.html(diffJson, { drawFileList: true });
console.log(diffHtml);
```
--------------------------------
### Integrate Diff2Html with StimulusJS and TypeScript
Source: https://github.com/rtfpessoa/diff2html/blob/master/README.md
This snippet illustrates how to use Diff2Html within a StimulusJS controller written in TypeScript. It demonstrates importing necessary modules, initializing Diff2HtmlUI in the `connect` lifecycle hook, and accessing diff data and configuration through controller properties. It also notes the required npm installations for highlight.js and diff2html styles.
```typescript
import { Controller } from '@hotwired/stimulus';
import { Diff2HtmlUI, Diff2HtmlUIConfig } from 'diff2html/lib/ui/js/diff2html-ui-slim.js';
// Requires `npm install highlight.js`
import 'highlight.js/styles/github.css';
import 'diff2html/bundles/css/diff2html.min.css';
export default class extends Controller {
connect(): void {
const diff2htmlUi = new Diff2HtmlUI(this.diffElement, this.unifiedDiff, this.diffConfiguration);
diff2htmlUi.draw();
}
get unifiedDiff(): string {
return this.data.get('unifiedDiff') || '';
}
get diffElement(): HTMLElement {
return this.element as HTMLElement;
}
get diffConfiguration(): Diff2HtmlUIConfig {
return {
drawFileList: true,
matching: 'lines',
};
}
}
```
--------------------------------
### Import Diff2HtmlUI for Collapsible File List
Source: https://github.com/rtfpessoa/diff2html/blob/master/README.md
HTML snippet for including the Diff2HtmlUI JavaScript bundle, which is a prerequisite for enabling and controlling the collapsible file summary list feature.
```html
```
--------------------------------
### Git Commit Message Structure Example
Source: https://github.com/rtfpessoa/diff2html/blob/master/CONTRIBUTING.md
Demonstrates the recommended structure for Git commit messages, including a concise subject line (50 chars max), a blank second line, and a detailed body wrapped at 72 columns for readability in `git log`.
```Git
subsystem: explaining the commit in one line
Body of commit message is a few lines of text, explaining things
in more detail, possibly giving some background about the issue
being fixed, etc. etc.
The body of the commit message can be several paragraphs, and
please do proper word-wrap and keep columns shorter than about
72 characters or so. That way `git log` will show things
nicely even when it is indented.
```
--------------------------------
### Diff2Html Configuration Options
Source: https://github.com/rtfpessoa/diff2html/blob/master/README.md
Describes the available configuration options for customizing the HTML output of Diff2Html, including output format, file list display, prefixing, and highlighting. These options are passed as a Javascript object to the `Diff2Html.html` function.
```APIDOC
Configuration Object:
outputFormat: string ('line-by-line' | 'side-by-side') - default: 'line-by-line'
The format of the output data.
drawFileList: boolean - default: true
Show a file list before the diff.
srcPrefix: string - default: ''
Add a prefix to all source (before changes) filepaths.
dstPrefix: string - default: ''
Add a prefix to all destination (after changes) filepaths.
diffMaxChanges: number | undefined - default: undefined
Number of changed lines after which a file diff is deemed as too big and not displayed.
diffMaxLineLength: number | undefined - default: undefined
Number of characters in a diff line after which a file diff is deemed as too big and not displayed.
diffTooBigMessage: function(fileIndex: number) => string
Function allowing to customize the message in case of file diff too big.
matching: string ('lines' | 'words' | 'none') - default: 'none'
Matching level for diffs.
matchWordsThreshold: number - default: 0.25
Similarity threshold for word matching.
maxLineLengthHighlight: number - default: 10000
Only perform diff changes highlight if lines are smaller than this.
diffStyle: string ('word' | 'char') - default: 'word'
Show differences level in each line.
renderNothingWhenEmpty: boolean - default: false
Render nothing if the diff shows no change in its comparison.
matchingMaxComparisons: number - default: 2500
Perform at most this much comparisons for line matching a block of changes.
maxLineSizeInBlockForComparison: number - default: 200
Maximum number of characters of the bigger line in a block to apply comparison.
compiledTemplates: object - default: {}
Hogan.js template values with previously compiled templates to replace parts of the html.
Example: { "tag-file-changed": Hogan.compile("MODIFIED") }
rawTemplates: object - default: {}
String values with raw not compiled templates to replace parts of the html.
Example: { "tag-file-changed": "MODIFIED" }
highlightLanguages: Map
Map of extension to language name, used for highlighting. Overrides default language detection.
colorScheme: string ('light' | 'dark' | 'auto') - default: 'light'
Color scheme to use for the diff.
```
--------------------------------
### Diff2HtmlUI Class API Reference
Source: https://github.com/rtfpessoa/diff2html/blob/master/README.md
This section provides the API reference for the `Diff2HtmlUI` class, a wrapper designed to simplify injecting diff HTML into the DOM and enabling features like syntax highlighting. It details the constructor overloads for different bundle versions and key methods for drawing the diff and enabling additional UI functionalities.
```APIDOC
Diff2HtmlUI:
constructor(target: HTMLElement, diffInput?: string | DiffFile[]) // diff2html-ui, diff2html-ui-slim
constructor(target: HTMLElement, diffInput?: string | DiffFile[], config: Diff2HtmlUIConfig = {}, hljs?: HighlightJS) // diff2html-ui-base
draw(): void
synchronisedScroll(): void
fileListToggle(startVisible: boolean): void
highlightCode(): void
stickyFileHeaders(): void
```
--------------------------------
### Draw Diff2HtmlUI Content
Source: https://github.com/rtfpessoa/diff2html/blob/master/README.md
JavaScript code to render the diff content within the target element after initializing the Diff2HtmlUI instance.
```js
diff2htmlUi.draw();
```
--------------------------------
### Import Diff2Html CSS and JavaScript via CDN
Source: https://github.com/rtfpessoa/diff2html/blob/master/README.md
This snippet shows how to include the necessary CSS stylesheet and JavaScript library for Diff2Html in a web page using CDN links, making the `Diff2Html` global object available.
```HTML
```
--------------------------------
### Integrate diff2html with Vue.js Component
Source: https://github.com/rtfpessoa/diff2html/blob/master/README.md
This snippet illustrates how to integrate the diff2html library into a Vue.js component. It demonstrates importing the library and its CSS, defining a data property for the diff string, and using a computed property to render the diff as HTML, which is then displayed in the template.
```vue
```
--------------------------------
### Diff2Html Core API Reference
Source: https://github.com/rtfpessoa/diff2html/blob/master/README.md
This section provides documentation for the core functions of the Diff2Html library, specifically `parse` for converting diff strings to a structured JSON representation and `html` for generating a pretty HTML output from a diff input. It details their parameters and return types.
```APIDOC
function parse(diffInput: string, configuration: Diff2HtmlConfig = {}): DiffFile[];
diffInput: The input diff string to be parsed.
configuration: Optional configuration object for parsing the diff.
Returns: An array of DiffFile objects representing the parsed diff.
function html(diffInput: string | DiffFile[], configuration: Diff2HtmlConfig = {}): string;
diffInput: The input diff string or an array of DiffFile objects to be rendered.
configuration: Optional configuration object for generating the HTML output.
Returns: A string containing the pretty HTML representation of the diff.
```
--------------------------------
### Optimize diff2html Performance for Large Diffs
Source: https://github.com/rtfpessoa/diff2html/blob/master/README.md
This snippet provides a solution for 'Out of memory' or 'Slow execution' issues when processing large diffs with diff2html. It advises disabling the line matching algorithm by setting the `matching` option to `'none'` during the `Diff2Html.html` invocation.
```APIDOC
Diff2Html.html(inputString, { "matching": "none" })
```
--------------------------------
### Integrate diff2html with Angular Component
Source: https://github.com/rtfpessoa/diff2html/blob/master/README.md
This snippet demonstrates how to use the diff2html library within an Angular component to convert a diff string into HTML. It includes the TypeScript component logic, the corresponding HTML template for rendering the output, and a JSON snippet for adding necessary styles to the Angular CLI configuration.
```typescript
import * as Diff2Html from 'diff2html';
import { Component, OnInit } from '@angular/core';
export class AppDiffComponent implements OnInit {
outputHtml: string;
constructor() {
this.init();
}
ngOnInit() {}
init() {
let strInput =
'--- a/server/vendor/golang.org/x/sys/unix/zsyscall_linux_mipsle.go\n+++ b/server/vendor/golang.org/x/sys/unix/zsyscall_linux_mipsle.go\n@@ -1035,6 +1035,17 @@ func Prctl(option int, arg2 uintptr, arg3 uintptr, arg4 uintptr, arg5 uintptr) (\n \n // THIS FILE IS GENERATED BY THE COMMAND AT THE TOP; DO NOT EDIT\n \n+func Pselect(nfd int, r *FdSet, w *FdSet, e *FdSet, timeout *Timespec, sigmask *Sigset_t) (n int, err error) {\n+\tr0, _, e1 := Syscall6(SYS_PSELECT6, uintptr(nfd), uintptr(unsafe.Pointer(r)), uintptr(unsafe.Pointer(w)), uintptr(unsafe.Pointer(e)), uintptr(unsafe.Pointer(timeout)), uintptr(unsafe.Pointer(sigmask)))\n+\tn = int(r0)\n+\tif e1 != 0 {\n+\t\terr = errnoErr(e1)\n+\t}\n+\treturn\n+}\n+\n+// THIS FILE IS GENERATED BY THE COMMAND AT THE TOP; DO NOT EDIT\n+\n func read(fd int, p []byte) (n int, err error) {\n \tvar _p0 unsafe.Pointer\n \tif len(p) > 0 {\n';
let outputHtml = Diff2Html.html(strInput, { drawFileList: true, matching: 'lines' });
this.outputHtml = outputHtml;
}
}
```
```html
diff2html
```
```json
"styles": [
"diff2html.min.css"
]
```
=== COMPLETE CONTENT === This response contains all available snippets from this library. No additional content exists. Do not make further requests.