Want line numbers on code steps? We got line numbers.

  • 21 January 2022
  • 2 replies
  • 153 views

Userlevel 1

I use a lot of code steps.

I also make a lot of mistakes.

When I’ve made a mistake in a code step, Zapier’s error handler politely gives me a line number… However, the code editor doesn’t show me line numbers.

So I wrote a ViolentMonkey script to inject a very simple chunk of CSS into the page. Et voila, line numbers!

Script and demo below.

I can’t guarantee this will always work, but I hope this helps someone!

// ==UserScript==
// @name NumberMyDangLines
// @namespace My Namespace
// @description Add line numbers to Zapier code blocks
// @match https://zapier.com/app/editor/*
// @grant GM_addStyle
// @version 1.0
// ==/UserScript==

GM_addStyle(`div[data-cy="Code"] div.CodeMirror-code {
counter-reset: line 7;
}`);

GM_addStyle(`div[data-cy="Code"] pre.CodeMirror-line:before {
counter-increment: line;
content: counter(line);
display: inline-block;
border-right: 1px solid #ddd;
padding: 0 .5em;
margin-right: .5em;
color: #888
}`);

 


2 replies

Userlevel 7
Badge +8

@cfepdan woah, thanks for sharing this! @nicksimard , cool eh? 

Hey! Really want to get this working but I suspect with the recent Zapier updates that this script could be outdated. Is there any way you could possibly let me know if this script still works with the latest Zapier update? If not, what can I do to get this working! Thanks so much!

Reply