Movatterモバイル変換

[0]ホーム
URL:

Skip to content

Navigation Menu

Sign in
Appearance settings

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly

 Sign up
Appearance settings

Commitb04a400

Browse files
authored
Merge pull request#514 from JHWelch/add-dark-mode
Add Dark & Auto color schemes
2 parents8102d3c +7410d25 commitb04a400

18 files changed

+1289
-107
lines changed

‎README.md‎

Lines changed: 18 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -201,7 +201,7 @@ diff2htmlUi.draw();
201201

202202
```html
203203
<!-- Stylesheet-->
204-
<linkrel="stylesheet"href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/9.13.1/styles/github.min.css" />
204+
<linkrel="stylesheet"href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.8.0/styles/github.min.css" />
205205
<linkrel="stylesheet"type="text/css"href="https://cdn.jsdelivr.net/npm/diff2html/bundles/css/diff2html.min.css" />
206206

207207
<!-- Javascripts-->
@@ -227,6 +227,21 @@ document.addEventListener('DOMContentLoaded', () => {
227227
});
228228
```
229229

230+
When using the`auto` color scheme, you will need to specify both the light and dark themes for highlight.js to use.
231+
232+
```html
233+
<link
234+
rel="stylesheet"
235+
href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.8.0/styles/github.min.css"
236+
media="screen and (prefers-color-scheme: light)"
237+
/>
238+
<link
239+
rel="stylesheet"
240+
href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.8.0/styles/github-dark.min.css"
241+
media="screen and (prefers-color-scheme: dark)"
242+
/>
243+
```
244+
230245
####Collapsable File Summary List
231246

232247
>Add the dependencies.
@@ -386,6 +401,8 @@ The HTML output accepts a Javascript object with configuration. Possible options
386401
>[src/templates](https://github.com/rtfpessoa/diff2html/tree/master/src/templates)
387402
-`highlightLanguages`: Map of extension to language name, used for highlighting. This overrides the default language
388403
detection based on file extensions.
404+
-`colorScheme`: color scheme to use for the diff, default is`light`. Possible values are`light`,`dark`, and`auto`
405+
which will use the browser's preferred color scheme.
389406

390407
###Diff2Html Browser
391408

‎src/__tests__/diff2html-tests.ts‎

Lines changed: 298 additions & 14 deletions
Large diffs are not rendered by default.

‎src/__tests__/file-list-printer-tests.ts‎renamed to ‎src/__tests__/file-list-renderer-tests.ts‎

Lines changed: 102 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,15 +1,17 @@
1-
import{render}from'../file-list-renderer';
1+
import{FileListRenderer}from'../file-list-renderer';
22
importHoganJsUtilsfrom'../hoganjs-utils';
3+
import{ColorSchemeType}from'../types';
34

4-
describe('FileListPrinter',()=>{
5-
describe('generateFileList',()=>{
5+
describe('FileListRenderer',()=>{
6+
describe('render',()=>{
67
it('should expose old and new files to templates',()=>{
78
consthoganUtils=newHoganJsUtils({
89
rawTemplates:{
910
'file-summary-wrapper':'{{{files}}}',
1011
'file-summary-line':'{{oldName}}, {{newName}}, {{fileName}}',
1112
},
1213
});
14+
constfileListRenderer=newFileListRenderer(hoganUtils);
1315
constfiles=[
1416
{
1517
isCombined:false,
@@ -55,7 +57,7 @@ describe('FileListPrinter', () => {
5557
},
5658
];
5759

58-
constfileHtml=render(files,hoganUtils);
60+
constfileHtml=fileListRenderer.render(files);
5961

6062
expect(fileHtml).toMatchInlineSnapshot(`
6163
"my/file/name.js, my/file/name.js, my/file/name.js
@@ -67,6 +69,8 @@ describe('FileListPrinter', () => {
6769

6870
it('should work for all kinds of files',()=>{
6971
consthoganUtils=newHoganJsUtils({});
72+
constfileListRenderer=newFileListRenderer(hoganUtils);
73+
7074
constfiles=[
7175
{
7276
isCombined:false,
@@ -111,9 +115,9 @@ describe('FileListPrinter', () => {
111115
isDeleted:true,
112116
},
113117
];
114-
constfileHtml=render(files,hoganUtils);
118+
constfileHtml=fileListRenderer.render(files);
115119
expect(fileHtml).toMatchInlineSnapshot(`
116-
"<div>
120+
"<divx x-first x-last"> d2h-light-color-scheme">
117121
<div class="d2h-file-list-header">
118122
<span class="d2h-file-list-title">Files changed (4)</span>
119123
<a class="d2h-file-switch d2h-hide">hide</a>
@@ -172,5 +176,97 @@ describe('FileListPrinter', () => {
172176
</div>"
173177
`);
174178
});
179+
180+
describe('with dark colorScheme',()=>{
181+
it('should include dark colorScheme',()=>{
182+
consthoganUtils=newHoganJsUtils({});
183+
constfileListRenderer=newFileListRenderer(hoganUtils,{
184+
colorScheme:ColorSchemeType.DARK,
185+
});
186+
187+
constfiles=[
188+
{
189+
isCombined:false,
190+
isGitDiff:false,
191+
blocks:[],
192+
addedLines:12,
193+
deletedLines:41,
194+
language:'js',
195+
oldName:'my/file/name.js',
196+
newName:'my/file/name.js',
197+
},
198+
];
199+
constfileHtml=fileListRenderer.render(files);
200+
expect(fileHtml).toMatchInlineSnapshot(`
201+
"<div class="d2h-file-list-wrapper d2h-dark-color-scheme">
202+
<div class="d2h-file-list-header">
203+
<span class="d2h-file-list-title">Files changed (1)</span>
204+
<a class="d2h-file-switch d2h-hide">hide</a>
205+
<a class="d2h-file-switch d2h-show">show</a>
206+
</div>
207+
<ol class="d2h-file-list">
208+
<li class="d2h-file-list-line">
209+
<span class="d2h-file-name-wrapper">
210+
<svg aria-hidden="true" class="d2h-icon d2h-changed" height="16" title="modified" version="1.1"
211+
viewBox="0 0 14 16" width="14">
212+
<path d="M13 1H1C0.45 1 0 1.45 0 2v12c0 0.55 0.45 1 1 1h12c0.55 0 1-0.45 1-1V2c0-0.55-0.45-1-1-1z m0 13H1V2h12v12zM4 8c0-1.66 1.34-3 3-3s3 1.34 3 3-1.34 3-3 3-3-1.34-3-3z"></path>
213+
</svg> <a href="#d2h-781444" class="d2h-file-name">my/file/name.js</a>
214+
<span class="d2h-file-stats">
215+
<span class="d2h-lines-added">+12</span>
216+
<span class="d2h-lines-deleted">-41</span>
217+
</span>
218+
</span>
219+
</li>
220+
</ol>
221+
</div>"
222+
`);
223+
});
224+
});
225+
226+
describe('with auto colorScheme',()=>{
227+
it('should include auto colorScheme',()=>{
228+
consthoganUtils=newHoganJsUtils({});
229+
constfileListRenderer=newFileListRenderer(hoganUtils,{
230+
colorScheme:ColorSchemeType.AUTO,
231+
});
232+
233+
constfiles=[
234+
{
235+
isCombined:false,
236+
isGitDiff:false,
237+
blocks:[],
238+
addedLines:12,
239+
deletedLines:41,
240+
language:'js',
241+
oldName:'my/file/name.js',
242+
newName:'my/file/name.js',
243+
},
244+
];
245+
constfileHtml=fileListRenderer.render(files);
246+
expect(fileHtml).toMatchInlineSnapshot(`
247+
"<div class="d2h-file-list-wrapper d2h-auto-color-scheme">
248+
<div class="d2h-file-list-header">
249+
<span class="d2h-file-list-title">Files changed (1)</span>
250+
<a class="d2h-file-switch d2h-hide">hide</a>
251+
<a class="d2h-file-switch d2h-show">show</a>
252+
</div>
253+
<ol class="d2h-file-list">
254+
<li class="d2h-file-list-line">
255+
<span class="d2h-file-name-wrapper">
256+
<svg aria-hidden="true" class="d2h-icon d2h-changed" height="16" title="modified" version="1.1"
257+
viewBox="0 0 14 16" width="14">
258+
<path d="M13 1H1C0.45 1 0 1.45 0 2v12c0 0.55 0.45 1 1 1h12c0.55 0 1-0.45 1-1V2c0-0.55-0.45-1-1-1z m0 13H1V2h12v12zM4 8c0-1.66 1.34-3 3-3s3 1.34 3 3-1.34 3-3 3-3-1.34-3-3z"></path>
259+
</svg> <a href="#d2h-781444" class="d2h-file-name">my/file/name.js</a>
260+
<span class="d2h-file-stats">
261+
<span class="d2h-lines-added">+12</span>
262+
<span class="d2h-lines-deleted">-41</span>
263+
</span>
264+
</span>
265+
</li>
266+
</ol>
267+
</div>"
268+
`);
269+
});
270+
});
175271
});
176272
});

‎src/__tests__/line-by-line-tests.ts‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -449,7 +449,7 @@ describe('LineByLineRenderer', () => {
449449
});
450450
consthtml=lineByLineRenderer.render(exampleJson);
451451
expect(html).toMatchInlineSnapshot(`
452-
"<div>
452+
"<divx x-first x-last"> d2h-light-color-scheme">
453453
<div id="d2h-675094" class="d2h-file-wrapper" data-lang="txt">
454454
<div class="d2h-file-header">
455455
<span class="d2h-file-name-wrapper">
@@ -523,7 +523,7 @@ describe('LineByLineRenderer', () => {
523523
});
524524
consthtml=lineByLineRenderer.render(exampleJson);
525525
expect(html).toMatchInlineSnapshot(`
526-
"<div>
526+
"<divx x-first x-last"> d2h-light-color-scheme">
527527
<div id="d2h-675094" class="d2h-file-wrapper" data-lang="js">
528528
<div class="d2h-file-header">
529529
<span class="d2h-file-name-wrapper">
@@ -583,7 +583,7 @@ describe('LineByLineRenderer', () => {
583583
constlineByLineRenderer=newLineByLineRenderer(hoganUtils);
584584
consthtml=lineByLineRenderer.render(exampleJson);
585585
expect(html).toMatchInlineSnapshot(`
586-
"<div>
586+
"<divx x-first x-last"> d2h-light-color-scheme">
587587
<div id="d2h-675094" class="d2h-file-wrapper" data-lang="js">
588588
<div class="d2h-file-header">
589589
<span class="d2h-file-name-wrapper">

‎src/__tests__/side-by-side-printer-tests.ts‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -278,7 +278,7 @@ describe('SideBySideRenderer', () => {
278278
constsideBySideRenderer=newSideBySideRenderer(hoganUtils,{matching:LineMatchingType.LINES});
279279
consthtml=sideBySideRenderer.render(exampleJson);
280280
expect(html).toMatchInlineSnapshot(`
281-
"<div>
281+
"<divx x-first x-last"> d2h-light-color-scheme">
282282
<div id="d2h-675094" class="d2h-file-wrapper" data-lang="txt">
283283
<div class="d2h-file-header">
284284
<span class="d2h-file-name-wrapper">
@@ -363,7 +363,7 @@ describe('SideBySideRenderer', () => {
363363
constsideBySideRenderer=newSideBySideRenderer(hoganUtils,{});
364364
consthtml=sideBySideRenderer.render(exampleJson);
365365
expect(html).toMatchInlineSnapshot(`
366-
"<div>
366+
"<divx x-first x-last"> d2h-light-color-scheme">
367367
<div id="d2h-675094" class="d2h-file-wrapper" data-lang="js">
368368
<div class="d2h-file-header">
369369
<span class="d2h-file-name-wrapper">
@@ -434,7 +434,7 @@ describe('SideBySideRenderer', () => {
434434
constsideBySideRenderer=newSideBySideRenderer(hoganUtils);
435435
consthtml=sideBySideRenderer.render(exampleJson);
436436
expect(html).toMatchInlineSnapshot(`
437-
"<div>
437+
"<divx x-first x-last"> d2h-light-color-scheme">
438438
<div id="d2h-675094" class="d2h-file-wrapper" data-lang="js">
439439
<div class="d2h-file-header">
440440
<span class="d2h-file-name-wrapper">

‎src/diff2html.ts‎

Lines changed: 5 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
import*asDiffParserfrom'./diff-parser';
2-
import*asfileListPrinterfrom'./file-list-renderer';
2+
import{FileListRenderer}from'./file-list-renderer';
33
importLineByLineRenderer,{LineByLineRendererConfig,defaultLineByLineRendererConfig}from'./line-by-line-renderer';
44
importSideBySideRenderer,{SideBySideRendererConfig,defaultSideBySideRendererConfig}from'./side-by-side-renderer';
55
import{DiffFile,OutputFormatType}from'./types';
@@ -32,7 +32,10 @@ export function html(diffInput: string | DiffFile[], configuration: Diff2HtmlCon
3232

3333
consthoganUtils=newHoganJsUtils(config);
3434

35-
constfileList=config.drawFileList ?fileListPrinter.render(diffJson,hoganUtils) :'';
35+
const{ colorScheme}=config;
36+
constfileListRendererConfig={ colorScheme};
37+
38+
constfileList=config.drawFileList ?newFileListRenderer(hoganUtils,fileListRendererConfig).render(diffJson) :'';
3639

3740
constdiffOutput=
3841
config.outputFormat==='side-by-side'

‎src/file-list-renderer.ts‎

Lines changed: 44 additions & 25 deletions
Original file line numberDiff line numberDiff line change
@@ -1,33 +1,52 @@
11
import*asrenderUtilsfrom'./render-utils';
22
importHoganJsUtilsfrom'./hoganjs-utils';
3-
import{DiffFile}from'./types';
3+
import{ColorSchemeType,DiffFile}from'./types';
44

55
constbaseTemplatesPath='file-summary';
66
consticonsBaseTemplatesPath='icon';
77

8-
exportfunctionrender(diffFiles:DiffFile[],hoganUtils:HoganJsUtils):string{
9-
constfiles=diffFiles
10-
.map(file=>
11-
hoganUtils.render(
12-
baseTemplatesPath,
13-
'line',
14-
{
15-
fileHtmlId:renderUtils.getHtmlId(file),
16-
oldName:file.oldName,
17-
newName:file.newName,
18-
fileName:renderUtils.filenameDiff(file),
19-
deletedLines:'-'+file.deletedLines,
20-
addedLines:'+'+file.addedLines,
21-
},
22-
{
23-
fileIcon:hoganUtils.template(iconsBaseTemplatesPath,renderUtils.getFileIcon(file)),
24-
},
25-
),
26-
)
27-
.join('\n');
8+
exportinterfaceFileListRendererConfig{
9+
colorScheme?:ColorSchemeType;
10+
}
11+
12+
exportconstdefaultFileListRendererConfig={
13+
colorScheme:renderUtils.defaultRenderConfig.colorScheme,
14+
};
15+
16+
exportclassFileListRenderer{
17+
privatereadonlyhoganUtils:HoganJsUtils;
18+
privatereadonlyconfig:typeofdefaultFileListRendererConfig;
19+
20+
constructor(hoganUtils:HoganJsUtils,config:FileListRendererConfig={}){
21+
this.hoganUtils=hoganUtils;
22+
this.config={ ...defaultFileListRendererConfig, ...config};
23+
}
24+
25+
render(diffFiles:DiffFile[]):string{
26+
constfiles=diffFiles
27+
.map(file=>
28+
this.hoganUtils.render(
29+
baseTemplatesPath,
30+
'line',
31+
{
32+
fileHtmlId:renderUtils.getHtmlId(file),
33+
oldName:file.oldName,
34+
newName:file.newName,
35+
fileName:renderUtils.filenameDiff(file),
36+
deletedLines:'-'+file.deletedLines,
37+
addedLines:'+'+file.addedLines,
38+
},
39+
{
40+
fileIcon:this.hoganUtils.template(iconsBaseTemplatesPath,renderUtils.getFileIcon(file)),
41+
},
42+
),
43+
)
44+
.join('\n');
2845

29-
returnhoganUtils.render(baseTemplatesPath,'wrapper',{
30-
filesNumber:diffFiles.length,
31-
files:files,
32-
});
46+
returnthis.hoganUtils.render(baseTemplatesPath,'wrapper',{
47+
colorScheme:renderUtils.colorSchemeToCss(this.config.colorScheme),
48+
filesNumber:diffFiles.length,
49+
files:files,
50+
});
51+
}
3352
}

‎src/line-by-line-renderer.ts‎

Lines changed: 4 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -52,7 +52,10 @@ export default class LineByLineRenderer {
5252
})
5353
.join('\n');
5454

55-
returnthis.hoganUtils.render(genericTemplatesPath,'wrapper',{content:diffsHtml});
55+
returnthis.hoganUtils.render(genericTemplatesPath,'wrapper',{
56+
colorScheme:renderUtils.colorSchemeToCss(this.config.colorScheme),
57+
content:diffsHtml,
58+
});
5659
}
5760

5861
makeFileDiffHtml(file:DiffFile,diffs:string):string{

0 commit comments

Comments
 (0)
[8]ページ先頭
©2009-2025 Movatter.jp