Diff

Overview

The Diff component parses + and - symbols on the head of lines, and highlights them as added/deleted lines.



-
-
-
+
+
+


export default function Layout( { children } ) {
  return (
    <div>
      { children }
    </div>
    <main className={ styles.main }>
      <section>{ children }</section>
    </main>
  );
}
JSX

export default function Layout( { children } ) {
  return (
-   <div>
-     { children }
-   </div>
+   <main className={ styles.main }>
+     <section>{ children }</section>
+   </main>
  );
}

This works with the LineNumbers component:

1
2

-

-

-
3+
4+
5+
6
7
export default function Layout( { children } ) {
  return (
    <div>
      { children }
    </div>
    <main className={ styles.main }>
      <section>{ children }</section>
    </main>
  );
}
JSX

export default function Layout( { children } ) {
  return (
-   <div>
-     { children }
-   </div>
+   <main className={ styles.main }>
+     <section>{ children }</section>
+   </main>
  );
}

Usage

import { RyuseiLight, Gutter, Diff } from '@ryusei/light';

RyuseiLight.compose( { Gutter, Diff } );

// Register LineNumbers if necessary.
// RyuseiLight.compose( { Gutter, Diff, LineNumbers } );
JavaScript

import { RyuseiLight, Gutter, Diff } from '@ryusei/light';


RyuseiLight.compose( { Gutter, Diff } );


// Register LineNumbers if necessary.
// RyuseiLight.compose( { Gutter, Diff, LineNumbers } );

Or import the component files:

<script src="path-to-the-file/gutter.min.js"></script>
<script src="path-to-the-file/diff.min.js"></script>

<!-- Import line-numbers.min.js if necessary -->
<!--<script src="path-to-the-file/line-numbers.min.js"></script>-->
HTML

<script src="path-to-the-file/gutter.min.js"></script>
<script src="path-to-the-file/diff.min.js"></script>


<!-- Import line-numbers.min.js if necessary -->
<!--<script src="path-to-the-file/line-numbers.min.js"></script>-->

Next, prepend + for added lines and/or - for removed ones to your snippet:

<pre>
export default function Layout( { children } ) {
  return (
-   <div>
-     { children }
-   </div>
+   <main className={ styles.main }>
+     <section>{ children }</section>
+   </main>
  );
}
</pre>

<pre>
export default function Layout( { children } ) {
  return (
-   <div>
-     { children }
-   </div>
+   <main className={ styles.main }>
+     <section>{ children }</section>
+   </main>
  );
}
</pre>

Then, set the diff option to true:

ryuseilight.apply( 'pre', { diff: true } );
JavaScript

ryuseilight.apply( 'pre', { diff: true } );

Options

The Diff component accepts some options by providing an object literal instead of true.

Option	Description
`removeSymbols`	Whether to remove `+`/`-` symbols or convert them to a space.
`addedSymbol`	Determines a symbol for added lines. The default value is `+`.
`deletedSymbol`	Determines a symbol for deleted (removed) lines. The default value is `-`.

By default, the Diff component converts + and - to spaces. You can remove them by setting removeSymbols to true.

Also, the default symbols can be changed by addedSymbol and deletedSymbol options:

ryuseilight.apply( 'pre', { 
  diff: {
    addedSymbol  : '>',
    deletedSymbol: '<',
  },
} );
JavaScript

ryuseilight.apply( 'pre', { 
  diff: {
    addedSymbol  : '>',
    deletedSymbol: '<',
  },
} );