source-fragment

Fetch source file fragment with highlighting

Install

npm install source-fragment

Example

Suppose we have the code (example.js):

function hello() {
    return (
      'world' +
      '!!!'
    );
}

To get colored fragment of this code:

var sf = require('source-fragment');

console.log(sf('example.js:2:12:5:6', { format: 'tty' }));

You'll see in console:

The same but in HTML format:

sf('example.js:2:12:5:6', { format: 'html' });
// <div class="j5as83pdmd85mv2c-source">
// <style>...</style>
// <div class="j5as83pdmd85mv2c-line"><span class="j5as83pdmd85mv2c-num">  2</span>...</div>
// ...
// </div>

When pasted on HTML page looks like:

API

sourceFragment(loc[, options])

Options:

• format

  Type: Object
  Default: null (no format is used)

  Defines formatter for a result. There are two predefined formats, that can be choosen by name (e.g. sourceFragment('...', { format: 'html' })):

  • html - formats result in HTML
  • tty – formats result using terminal escape codes, useful to output in console with color support

• linesBefore

  Type: Number
  Default: 0

  Lines added before a range start line.

• linesAfter

  Type: Number
  Default: 0

  Lines added after a range end line.

• maxLines

  Type: Number
  Default: Infinity

  Limits lines number in result.

• collapseOffset

  Type: Boolean
  Default: false

  Cut off common offset in resulting fragment, i.e. move source to the left as much as possible.

• tabSize

  Type: Number
  Default: 8

  Number of spaces that used as tab replacement, i.e. tabs in source replaces for 8 spaces by default.

Related projects

• express-source-fragment – Express middleware to fetch a source fragment by request to server.
• Component Inspector – developer tool to inspect components that can open component creation source location in editor. Has integrations for React, Backbone and can be adopted for other frameworks.

License

MIT