diff --git a/cypress/integration/code.spec.ts b/cypress/integration/code.spec.ts
new file mode 100644
index 000000000..1541510be
--- /dev/null
+++ b/cypress/integration/code.spec.ts
@@ -0,0 +1,90 @@
+describe('Code', () => {
+  beforeEach(() => {
+    cy.visit('/n/test')
+    cy.get('.btn.active.btn-outline-secondary > i.fa-columns')
+      .should('exist')
+    cy.get('.CodeMirror textarea')
+      .type('{ctrl}a', { force: true })
+      .type('{backspace}')
+  })
+
+  describe('without = doesn\'t show gutter', () => {
+    it("without wrapLines active", () => {
+      cy.get('.CodeMirror textarea')
+        .type(`\`\`\`javascript \nlet x = 0\n\`\`\``)
+      cy.get('.markdown-body > pre > code')
+        .should('have.class', 'hljs')
+    })
+
+    it("with wrapLines active", () => {
+      cy.get('.CodeMirror textarea')
+        .type(`\`\`\`javascript!\nlet x = 0\n\`\`\``)
+      cy.get('.markdown-body > pre > code')
+        .should('have.class', 'hljs')
+        .should('have.class', 'wrapLines')
+    })
+  })
+
+  describe('with = shows gutter', () => {
+    it("without wrapLines active", () => {
+      cy.get('.CodeMirror textarea')
+        .type(`\`\`\`javascript=\nlet x = 0\n\`\`\``)
+      cy.get('.markdown-body > pre > code')
+        .should('have.class', 'hljs')
+        .should('have.class', 'showGutter')
+      cy.get('.markdown-body > pre > code > span')
+        .should('have.class', 'linenumber')
+        .should('have.attr', 'data-line-number', '1')
+    })
+
+    it("with wrapLines active", () => {
+      cy.get('.CodeMirror textarea')
+        .type(`\`\`\`javascript=! \nlet x = 0\n\`\`\``)
+      cy.get('.markdown-body > pre > code')
+        .should('have.class', 'hljs')
+        .should('have.class', 'showGutter')
+        .should('have.class', 'wrapLines')
+      cy.get('.markdown-body > pre > code > span')
+        .should('have.class', 'linenumber')
+        .should('have.attr', 'data-line-number', '1')
+    })
+  })
+
+  describe('with = shows gutter and number is used as startline', () => {
+    it("without wrapLines active", () => {
+      cy.get('.CodeMirror textarea')
+        .type(`\`\`\`javascript=100\nlet x = 0\n\`\`\``)
+      cy.get('.markdown-body > pre > code')
+        .should('have.class', 'hljs')
+        .should('have.class', 'showGutter')
+      cy.get('.markdown-body > pre > code > span')
+        .should('have.class', 'linenumber')
+        .should('have.attr', 'data-line-number', '100')
+    })
+
+    it("with wrapLines active", () => {
+      cy.get('.CodeMirror textarea')
+        .type(`\`\`\`javascript=100! \nlet x = 0\n\`\`\``)
+      cy.get('.markdown-body > pre > code')
+        .should('have.class', 'hljs')
+        .should('have.class', 'showGutter')
+        .should('have.class', 'wrapLines')
+      cy.get('.markdown-body > pre > code > span')
+        .should('have.class', 'linenumber')
+        .should('have.attr', 'data-line-number', '100')
+    })
+  })
+
+  it('has a button', () => {
+    cy.get('.CodeMirror textarea')
+      .type(`\`\`\`javascript \nlet x = 0\n\`\`\``)
+    cy.get('.markdown-body > pre > div > button > i')
+      .should('have.class', 'fa-files-o')
+      .click()
+    // This line can be activated if cypress supports copy to clipboard in firefox, too.
+    // Please run `yarn add --dev clipboardy`
+    // uncomment cypress plugin
+    // cy.task('getClipboard').should('contain', 'let x = 0\n');
+  })
+
+})
diff --git a/cypress/plugins/index.js b/cypress/plugins/index.js
new file mode 100644
index 000000000..88bfac4f7
--- /dev/null
+++ b/cypress/plugins/index.js
@@ -0,0 +1,8 @@
+// const clipboardy = require('clipboardy');
+module.exports = ( on ) => {
+  on('task', {
+    getClipboard () {
+      // return clipboardy.readSync();
+    }
+  });
+};
diff --git a/src/components/markdown-renderer/replace-components/highlighted-fence/highlighted-fence-replacer.tsx b/src/components/markdown-renderer/replace-components/highlighted-fence/highlighted-fence-replacer.tsx
index 4c7fe9658..0f230fc7c 100644
--- a/src/components/markdown-renderer/replace-components/highlighted-fence/highlighted-fence-replacer.tsx
+++ b/src/components/markdown-renderer/replace-components/highlighted-fence/highlighted-fence-replacer.tsx
@@ -20,9 +20,9 @@ export class HighlightedCodeReplacer extends ComponentReplacer {
     let wrapLines = false
 
     if (extraInfos) {
-      showLineNumbers = extraInfos[0] !== undefined
-      startLineNumberAttribute = extraInfos[1]
-      wrapLines = extraInfos[2] !== undefined
+      showLineNumbers = extraInfos[1]?.startsWith('=') || false
+      startLineNumberAttribute = extraInfos[2]
+      wrapLines = extraInfos[3] === '!'
     }
 
     const startLineNumber = startLineNumberAttribute === '+' ? this.lastLineNumber : (parseInt(startLineNumberAttribute) || 1)