Support strikethrough text style

src/browser/renderer/BaseRenderLayer.ts

@@ -152,6 +152,21 @@ export abstract class BaseRenderLayer implements IRenderLayer {
       height * this._scaledCellHeight);
   }
 
+  /**
+     * Fills a 1px line (2px on HDPI) at the middle of the cell. This uses the
+     * existing fillStyle on the context.
+     * @param x The column to fill.
+     * @param y The row to fill.
+     */
+  protected _fillMiddleLineAtCells(x: number, y: number, width: number = 1): void {
+    const cellOffset = Math.ceil(this._scaledCellHeight * 0.5);
+    this._ctx.fillRect(
+      x * this._scaledCellWidth,
+      (y + 1) * this._scaledCellHeight - cellOffset - window.devicePixelRatio,
+      width * this._scaledCellWidth,
+      window.devicePixelRatio);
+  }
+
   /**
    * Fills a 1px line (2px on HDPI) at the bottom of the cell. This uses the
    * existing fillStyle on the context.

src/browser/renderer/TextRenderLayer.ts

@@ -215,7 +215,7 @@ export class TextRenderLayer extends BaseRenderLayer {
         return;
       }
       this._drawChars(cell, x, y);
-      if (cell.isUnderline()) {
+      if (cell.isUnderline() || cell.isStrikethrough()) {
         this._ctx.save();
 
         if (cell.isInverse()) {
@@ -244,7 +244,12 @@ export class TextRenderLayer extends BaseRenderLayer {
           }
         }
 
-        this._fillBottomLineAtCells(x, y, cell.getWidth());
+        if (cell.isStrikethrough()) {
+          this._fillMiddleLineAtCells(x, y, cell.getWidth());
+        }
+        if (cell.isUnderline()) {
+          this._fillBottomLineAtCells(x, y, cell.getWidth());
+        }
         this._ctx.restore();
       }
     });

src/browser/renderer/dom/DomRendererRowFactory.test.ts

@@ -132,6 +132,16 @@ describe('DomRendererRowFactory', () => {
         );
       });
 
+      it('should add class for strikethrough', () => {
+        const cell = CellData.fromCharData([0, 'a', 1, 'a'.charCodeAt(0)]);
+        cell.fg = DEFAULT_ATTR_DATA.fg | FgFlags.STRIKETHROUGH;
+        lineData.setCell(0, cell);
+        const fragment = rowFactory.createRow(lineData, 0, false, undefined, 0, false, 5, 20);
+        assert.equal(getFragmentHtml(fragment),
+          '<span class="xterm-strikethrough">a</span>'
+        );
+      });
+
       it('should add classes for 256 foreground colors', () => {
         const cell = CellData.fromCharData([0, 'a', 1, 'a'.charCodeAt(0)]);
         cell.fg |= Attributes.CM_P256;

src/browser/renderer/dom/DomRendererRowFactory.ts

@@ -17,6 +17,7 @@ export const BOLD_CLASS = 'xterm-bold';
 export const DIM_CLASS = 'xterm-dim';
 export const ITALIC_CLASS = 'xterm-italic';
 export const UNDERLINE_CLASS = 'xterm-underline';
+export const STRIKETHROUGH_CLASS = 'xterm-strikethrough';
 export const CURSOR_CLASS = 'xterm-cursor';
 export const CURSOR_BLINK_CLASS = 'xterm-cursor-blink';
 export const CURSOR_STYLE_BLOCK_CLASS = 'xterm-cursor-block';
@@ -151,6 +152,10 @@ export class DomRendererRowFactory {
         charElement.textContent = cell.getChars() || WHITESPACE_CELL_CHAR;
       }
 
+      if (cell.isStrikethrough()) {
+        charElement.classList.add(STRIKETHROUGH_CLASS);
+      }
+
       let fg = cell.getFgColor();
       let fgColorMode = cell.getFgColorMode();
       let bg = cell.getBgColor();