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.

< Commentaires sur Better GreasyFork Code Reader + JS Beautifier

Avis: Bon - le script fonctionne correctement

§
Posté le: 03/02/2021

Can you add a zebbra line effect ?

hacker09Auteur
§
Posté le: 03/02/2021
Édité le: 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

§
Posté le: 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;
}

hacker09Auteur
§
Posté le: 04/02/2021
Édité le: 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

§
Posté le: 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.

hacker09Auteur
§
Posté le: 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

§
Posté le: 04/02/2021

;-)

Poster une réponse

Connectez-vous pour poster une réponse.