生成code diff html


vscode的diff很好用,但无法导出html,而且官方没有做这个功能的计划:🔗 [Save file diff as html · Issue #198027 · microsoft/vscode] https://github.com/microsoft/vscode/issues/198027 

网页版vscode:diff两个文件以后可以用SingleFile这种插件导出单个html,效果也挺好的,但感觉还是怪怪的(太绕了)

找了一圈,发现可以用vimdiff:🔗 [vim - Save vimdiff output? - Stack Overflow] https://stackoverflow.com/questions/7475244/save-vimdiff-output 

默认是深色主题,如果想要换成浅色主题:https://stackoverflow.com/a/53130672

发现没有语法高亮,去修改~/.vimrc文件:

if &diff
    colorscheme github
    syntax enable
endif

使用命令

vimdiff file1.txt file2.txt -c TOhtml -c 'w! diff.html' -c 'qa!'

效果是这样的:diff_original.html

但有的时候还是想要那种两边都显示全部文本的diff(和vscode一样)

由于之前没用过vimdiff,所以只能找gpt修改了一下vimdiff的语法,变成了side-by-side全文本的对比:

vimdiff file1.txt file2.txt \
  -c 'set diffopt+=linematch:50' \
  -c 'highlight DiffChange ctermbg=yellow guibg=#fff79a' \
  -c 'highlight DiffText cterm=bold' \
  -c 'windo set nofoldenable' \
  -c TOhtml \
  -c 'w! diff.html' \
  -c 'qa!'

搞好了

example:

1.py, 2.py, diff_langPython.html

file1.c, file2.c, diff_langC.html


应该还有其他方案的,但目前用vimdiff感觉良好暂时就不换了:

🔗 [diff2html] https://diff2html.xyz/ 


Leave a Comment Anonymous comment is allowed / 允许匿名评论