diff --git a/client/components/codeEditor/codeEditor.jsx b/client/components/codeEditor/codeEditor.jsx
index 210ead6dd..9c97ba0e3 100644
--- a/client/components/codeEditor/codeEditor.jsx
+++ b/client/components/codeEditor/codeEditor.jsx
@@ -53,22 +53,6 @@ const createHighlightPlugin = (renderer, tab)=>{
 	} else {
 		tokenize = renderer === 'V3' ? tokenizeCustomMarkdown : legacyTokenizeCustomMarkdown;
 	}
-	/* eslint-disable no-restricted-syntax */
-	class countWidget extends WidgetType {
-		constructor(count) {
-			super();
-			this.count = count;
-		}
-		toDOM() {
-			const span = document.createElement('span');
-			span.className = 'cm-count';
-			span.textContent = this.count;
-			span.style.color = '#989898';
-			return span;
-		}
-		ignoreEvent() { return true; }
-	}
-	/* eslint-enable no-restricted-syntax */
 
 	return ViewPlugin.fromClass(
 		class {
@@ -96,11 +80,11 @@ const createHighlightPlugin = (renderer, tab)=>{
 						if(tok.type === 'pageLine'  && tab === 'brewText') {
 							pageCount++;
 							line.from === 0 && pageCount--;
-							decos.push(Decoration.widget({ widget: new countWidget(pageCount), side: 2 }).range(line.to));
+							decos.push( Decoration.line({ attributes: { "data-page-number": pageCount }}).range(line.from));
 						}
 						if(tok.type === 'snippetLine' && tab === 'brewSnippets') {
 							snippetCount++;
-							decos.push(Decoration.widget({ widget: new countWidget(snippetCount), side: 2 }).range(line.to));
+							decos.push(Decoration.line({ attributes: { "data-page-number": pageCount }}).range(line.from));
 						}
 					}
 				});
diff --git a/client/homebrew/editor/editor.less b/client/homebrew/editor/editor.less
index aaa8798fc..7503749fc 100644
--- a/client/homebrew/editor/editor.less
+++ b/client/homebrew/editor/editor.less
@@ -45,8 +45,9 @@
 				}
 			}
 		
-			.cm-count {
-				float : right;
+			.cm-pageLine[data-page-number]::after {
+				content:attr(data-page-number);
+				float:right;
 				color : grey;
 			}
 			.cm-columnSplit {