Greasy Fork is available in English.

Better GreasyFork Code Reader + JS Beautifier

Show the Codes page of any script on GreasyFork With all code lines background in white and beautify them if you want. With this script, you can also Beautify your UserScripts before publishing them.

< Feedback on Better GreasyFork Code Reader + JS Beautifier

Review: Good - script works

§
Posted: 03. 02. 2021

Can you add a zebbra line effect ?

hacker09Author
§
Posted: 03. 02. 2021
Edited: 03. 02. 2021

If you mean that you don't want the script to change all code lines background color to white, in this script codes modify this
if (location.href.match(/^https:\/\/greasyfork\.org\/(?:[^\/]+\/)scripts\/(?:[^\/]+\/)code/)) //If the user is reading a code page

to
if (false) //If the user is reading a code page

§
Posted: 03. 02. 2021

Without your script, i can do by example:
pre.linenums.prettyprinted li {
box-shadow: -1px 1px 2px rgba(255, 211, 0, 0.2);
}


Which provide a subtle effect around code line (like a paper line...):
See my screenshot, i have a bad english.

But when enable i can't match these li in script code...

I tested the change you explain, but it don't do that is want.

PS:
A long time ago i tested an effect similar but applied on background:
CSS3 Patterns Gallery - Horizontal stripes
It is interesting (here a test):
/* (new191bis) CODE - TEST Stripped BACKGROUND for:
https://greasyfork.org/fr/scripts/418889-better-greasyfork-code-reader-js-beautifier/code
=== */
pre.linenums.prettyprinted .linenums {
line-height: 15px !important;
padding: 0px;
background-color: #ffff99;
background-image: linear-gradient(transparent 95%, rgba(128, 128, 128, 0.1) 20%);
background-size: 1px 15px;
}

hacker09Author
§
Posted: 04. 02. 2021
Edited: 04. 02. 2021

I've updated the script to use the first zebra line effect css you posted here, the second one looks really bad.
But if you want to change the css of every single code lines just change this

Lines[i].setAttribute("style", "background: none;box-shadow: -1px 1px 2px rgba(255, 211, 0, 0.2);"); //Remove the grey line background and add a zebbra line effect

To

Lines[i].setAttribute("style", "YOUR CSS HERE"); //Add your css to every single code lines

§
Posted: 04. 02. 2021

Thanks for the update,
But it don't add any zebbra things or line when the beautifier is ticked?

My first solution is good , only for the normal code (JS Beautifer not ticked).
That's because line can be matched by .pre.linenums.prettyprinted li,

Only this selector match each line, and you can style then,
and it is only present when it's the normal code container.

It is why i proposed the striped background,
which not need to have a selector by line to do the job...

I don't see any other solution to do that.

Ps:
You can test a different background-color

But padding: 0px; is important to not have a bad effect.

hacker09Author
§
Posted: 04. 02. 2021

"But it don't add any zebbra things or line when the beautifier is ticked?"
No.

Thanks for the selector.
I know that it matches all lines, but something like a for condition is still needed anyways, unless I used some kind of regex. But for this script it doesn't matter that much anyways, it's working so it's fine

§
Posted: 04. 02. 2021

;-)

Post reply

Sign in to post a reply.