feat: add @start to CodeBlock for custom line number start

README.md

@@ -48,6 +48,29 @@ For the latter you may need to use `<`, and `>` html attributes to escape
 
 The `@language` argument is optional, and if passed should match one of Prism's [supported languages](https://prismjs.com/#supported-languages).
 
+#### Overriding Line Numbers
+
+If you have opted to use the `line-numbers` plugin within your `ember-cli-build.js`, then you can optionally pass in `@start` to `<CodeBlock/>` to set a custom starting line.  This is particularly useful when showing "contiguous" *hunks* of code (while not showing the *entire* code file).
+
+(within `ember-cli-build.js`):
+```js
+module.exports = function (defaults) {
+  let app = new EmberAddon(defaults, {
+    // other options
+    'ember-prism': {
+      plugins: ['line-numbers']
+    },
+  });
+};
+```
+
+(in your component that renders a `<CodeBlock />`)
+```hbs
+<CodeBlock @code={{this.vulnerability.code}} @start={{this.vulnerability.startLineNumber}} />
+```
+
+This will result in the code block starting its line numbering from `this.vulnerability.startLineNumber`, instead of `1`.
+
 ### Configuration
 
 You can set which theme, components, and plugins you'd like to use from Prism.

addon/components/code-block.hbs

@@ -1,5 +1,6 @@
 <pre
   class="{{this.languageClass}} {{if @showLineNumbers "line-numbers"}}"
+  data-start={{@start}}
 >
   {{~! ~}}
   <CodeInline

tests/integration/components/code-block-test.js

@@ -54,4 +54,20 @@ module('Integration | Component | code-block', function (hooks) {
     assert.dom('code').hasText(code2);
     assert.dom('code > .tag').hasText('<p class="bar">');
   });
+
+  test('takes a @start param to apply on the <pre> element ', async function (assert) {
+    const code =
+      '<p>line 1</p>\n<p>line 2</p>\n<p>line 3</p>\n<p>line 4</p>\n<p>line 5</p>\n';
+    const lineStartNumber = 1000;
+    this.set('code', code);
+    this.set('start', lineStartNumber);
+    await render(hbs`
+      <CodeBlock @language="html" @code={{this.code}} @start={{this.start}} class="line-numbers"/>
+    `);
+
+    assert.dom('pre').hasAttribute('data-start', `${lineStartNumber}`);
+    assert.dom('.line-numbers').hasStyle({
+      'counter-reset': `linenumber ${lineStartNumber - 1}`,
+    });
+  });
 });