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.

< 腳本Better GreasyFork Code Reader + JS Beautifier的回應

評論:正評 - 腳本一切正常

§
發表於:2021-02-03

Can you add a zebbra line effect ?

hacker09作者
§
發表於:2021-02-03
編輯:2021-02-03

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

§
發表於:2021-02-03

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;
}

hacker09作者
§
發表於:2021-02-04
編輯:2021-02-04

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

§
發表於:2021-02-04

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.

hacker09作者
§
發表於:2021-02-04

"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

§
發表於:2021-02-04

;-)

發表回覆

登入以回復