markdownで差分表示

はじめてのMarkdown―軽量マークアップ言語の記法と使い方 (I・O BOOKS)

お恥ずかしいのですが、markdownで差分表示できることを知りませんでした

人様の記事をみてどうやってやっているのかな～なんて思っていましたが 以下の手順でできました

• 設定の部分にdiffを追加する
• 全体的にスペースを追加する
• 加えた部分に「＋」を削除した部分に「-」

ベースのソース

` ` `
import React, { Component } from 'react';
import logo from './logo.svg';
import './App.css';
` ` `

設定の部分にdiffを追加する

` ` `diff
import React, { Component } from 'react';
import logo from './logo.svg';
import './App.css';
` ` `

全体的にスペースを追加する

↓importの前にスペースを追加しています

` ` `diff
import React, { Component } from 'react';
import logo from './logo.svg';
import './App.css';
` ` `

加えた部分に「＋」を削除した部分に「-」を追加する

↓importの前にスペースを追加しています

` ` `diff
import React, { Component } from 'react';
-import logo from './logo.svg';
+import './App.css';
` ` `

結果

 import React, { Component } from 'react';
-import logo from './logo.svg';
+import './App.css';

削除された部分が紫になり、追加されたところが青になります （CSSによって違うのであくまでも例です）