CSS' syntax - grammar editor/corrector

Demetrius Pinheiro

I found the “shortcuts.xml” (I am using ver 7.6.3 64-bit).
When editing this xml file, is any special place where to paste your code?

At the “Run Menu”, where exactly should appear this “Validate” entry?

I edited the xml file => selected my CSS script to be validated => went to run menu… and nothing appeared there… I failed. Perhaps I pasted your code in the wrong place?

Once again, sorry for my ignorance, is my first time with NP++, hope you will be patient with me.
Thanks a lot

Eko palypse

@Demetrius-Pinheiro

when you open the shortcuts.xml file you should see a section
UserDefinedCommands - paste it in there, then you need to restart Npp as
this file is only read on startup.

Demetrius Pinheiro

@Eko-palypse … yeah, following the logic, this is exactly what I did, but nothing appears at my Run Menu. Below I attach you my entire shortcuts.xml. Any suggestions?

Thank you for your link about css-eXplorer. I tried to install but NP++ says that this plugin is incompatible with my NP++ version.

<NotepadPlus>
<InternalCommands />
<Macros>
<Macro name=“Trim Trailing Space and Save” Ctrl=“no” Alt=“yes” Shift=“yes” Key=“83”>
<Action type=“2” message=“0” wParam=“42024” lParam=“0” sParam=“” />
<Action type=“2” message=“0” wParam=“41006” lParam=“0” sParam=“” />
</Macro>
</Macros>
<UserDefinedCommands>
<Command name=“Launch in Firefox” Ctrl=“yes” Alt=“yes” Shift=“yes” Key=“88”>firefox “$(FULL_CURRENT_PATH)”</Command>
<Command name=“Launch in IE” Ctrl=“yes” Alt=“yes” Shift=“yes” Key=“73”>iexplore “$(FULL_CURRENT_PATH)”</Command>
<Command name=“Launch in Chrome” Ctrl=“yes” Alt=“yes” Shift=“yes” Key=“82”>chrome “$(FULL_CURRENT_PATH)”</Command>
<Command name=“Launch in Safari” Ctrl=“yes” Alt=“yes” Shift=“yes” Key=“65”>safari “$(FULL_CURRENT_PATH)”</Command>
<Command name=“Get PHP help” Ctrl=“no” Alt=“yes” Shift=“no” Key=“112”>http://www.php.net/$(CURRENT_WORD)</Command>
<Command name=“Wikipedia Search” Ctrl=“no” Alt=“yes” Shift=“no” Key=“114”>https://en.wikipedia.org/wiki/Special:Search?search=$(CURRENT_WORD)</Command>
<Command name=“Open file in another instance” Ctrl=“no” Alt=“yes” Shift=“no” Key=“117”>$(NPP_FULL_FILE_PATH) $(CURRENT_WORD) -nosession -multiInst</Command>
<Command name=“Send via Outlook” Ctrl=“yes” Alt=“yes” Shift=“yes” Key=“79”>outlook /a “$(FULL_CURRENT_PATH)”</Command>
<Command name=“Validate CSS” Ctrl=“no” Alt=“no” Shift=“no” Key=“0”>PATH_TO_BROWSER\firefox.exe https://jigsaw.w3.org/css-validator/validator?text=$(CURRENT_WORD)</Command>
</UserDefinedCommands>
<PluginCommands />
<ScintillaKeys />
</NotepadPlus>

Eko palypse

@Demetrius-Pinheiro said:

would you mind posting the debug-info from ? menu?

Demetrius Pinheiro

@Eko-palypse , I apologize because you mentioned the “debug-info” but I didn’t know what was it. Now I found it:

Notepad++ v7.6.3 (64-bit)
Build time : Jan 27 2019 - 17:16:47
Path : C:\Program Files\Notepad++\notepad++.exe
Admin mode : ON
Local Conf mode : OFF
OS : Windows 10 (64-bit)
Plugins : DSpellCheck.dll mimeTools.dll NppConverter.dll PluginManager.dll _CustomizeToolbar.dll

Eko palypse

@Demetrius-Pinheiro said:

Local Conf mode : OFF

this means that your shortcts.xml is used from %appdata%\notepad++
and not from install direcotry.
Can you double check if this is the file you edited?

Demetrius Pinheiro

@Eko-palypse , ok, sorry, my fault!, I found another shortcuts.xml at my %appdata%\notepad++, edited it, and finally the “Validate CSS” entry appeared at my Run Menu. Thank you!

However, sadly it didn’t work, the following message appears:
“The System cannot find the file specified. An attempt was made to execute the below command”…
… “Command: PATH_TO_BROWSER\firefox.exe Arguments: https://jigsaw.w3.org/css-validator/validator?text=”…
… “here appears the CSS’ script I selected”…
… “Error Code: 2”.

Eko palypse

@Demetrius-Pinheiro said:

PATH_TO_BROWSER\firefox.exe

sorry :-) but I thought it is obvious that you need to modify this
PATH_TO_BROWSER\firefox.exe
to your real path.
If you use an installed browser then it might even be possible using the program exe name alone.

Demetrius Pinheiro

OK, but please correct me if I am wrong, this “Run Menu” command will open any browser of my preference, where the jigsaw webpage also will be open, and the CSS’ script I select will be there inside this webpage and browser… right?

In other words, it is not going to be a CSS’ validator inside NP++, it is outside NP++… right?

I ask because I wanted something automatic, inside NP++, something that will validate my CSS’ scripts automatically, while I am writing those scripts inside NP++.

Eko palypse

You are absolutely correct, this will use the browser, open the validator page and providing
the data which should be validated.
It is NOT a plugin that could be used when you are offline.

Demetrius Pinheiro

@Eko-palypse … thanks a lot… and thank you for your time and patience.

I will keep my post open, in the case some one else knows about a plugin or other solution.
If nothing better appears, I will try the css-eXplorer plugin with an older NPP++ version (or perhaps some one can teach me how to use css-eXplorer or similar plugin with my latest NP++ version).

Anyway, thank you once again!

Eko palypse

my pleasure - hopefully someone else knows a plugin which could be used to your advantage.

PeterJones

I don’t have a plugin … but if you don’t want to have to be online, you could find and download an offline CSS-checker to install on your Windows machine (sorry, I have no recommendations); you could then use the NppExec plugin (or PythonScript, though this seems better suited to NppExec, to me) to launch the external css-checker command on the active file. NppExec (or PythonScript) have ways of putting a command in the menu, so you can bind a keyboard shortcut to it.

For example, if you installed C:\Program Files\SomeCssChecker\somecsschecker.exe, then a possible sequence using NppExec: Plugins > NppExec > Execute:

NPP_SAVE
cd "$(CURRENT_DIRECTORY)"
"C:\Program Files\SomeCssChecker\somecsschecker.exe" "$(FILE_NAME)"

Then Save…, give it a name like “SomeCssChecker”, Save, and finally OK (to run it right away) or Cancel (if you just wanted to define it, without running immediately). When you do run it, the output will go in a “console” windown inside NPP.

To make a keyboard shortcut, Plugins > NppExec > Advanced Options…, enable Place to the Macros submenu, then go down to Menu Item, set the Item Name: to SomeCssChecker, and Associated Script to SomeCssChecker from the pulldown, then Add/Modify to place it into the list above. Click OK and Notepad++ will tell you that you have to restart Notepad++ in order to see it in the Macro menu: so restart. Now looking at Macro menu, “SomeCssChecker” will appear. Go to Macro > Modify Shortcut / Delete Macro; oddly enough, even though it’s now in the Macro menu, it doesn’t show up on the Macros tab of Shortcut Mapper. Instead, go to the Plugin Comands tab; scroll down (or, in new enough Notepad++, type NppExec in the Filter), click on SomeCssChecker, Modify, and select the keyboard shortcut. If you pick a shortcut that already exists (like Ctrl+C), it will say “CONFLICT FOUND!”, and in the Shortcut Mapper, there will be a box telling what it conflicts with; either Modify again, or go modify the other conflicting shortcut.

Good luck (and sorry I couldn’t recommend a specific instance for SomeCssChecker.exe)

Demetrius Pinheiro

Hi @PeterJones ! Very nice answer. Thank you!

Unfortunately, today I can’t test your suggestion. But I will test it soon. And I will be back to you with the result.

I don’t really care if the CSS’ validator is online or offline. But I would like a solution inside NP++. Yeah, no problem to connect NP++ online, or to bind NP++ to a SomeCssChecker.exe. But in any case, I do prefer something automatic happening inside my NP++, a kind of real-time CSS’ validator (online/offline) checking my CSS’ scripts while I write them at NP++.

Honestly, if I need to open a browser or a SomeCssChecker.exe to validate my CSS’ script (wrote at NP++), and if I need to work in another screen/software… in this case I will prefer to use another solution. In my ignorance, I believe that’s the reason why I was looking for a “NP++ plugin”. If no one here has a plugin to recommend me, perhaps I will try to downgrade my NP++ to an older version, in order to try old plugins.

But in any case, I will test you solution during the next week.

Thanks again!

Alan Kilborn

@Demetrius-Pinheiro said:

if I need to open a browser or a SomeCssChecker.exe to validate my CSS’ script (wrote at NP++), and if I need to work in another screen/software… in this case I will prefer to use another solution

If this can be made to work as Peter suggests, I think you will like it and you won’t “prefer to use another solution”.

Meta Chuh

@Demetrius-Pinheiro

i’ve just played around with customised css validation, using all the information from you, @Eko-palypse and @PeterJones, and i think my test setup looks good enough to hand it over.

it uses notepad++ and an offline tool called “css (cse) html validator” which is very, very powerful, highly configurable, has a lot of integration apis and is completely scriptable and command line capable.

all css/html test reports will be shown directly inside a notepad++ tab.
displaying your complete validation results, with clear text explanations of every warning, suggestion or error, and most important, a summary at the top 👍
(see last screenshot of this guide)
all css and html checks will be accompanied by an audible “tadaaaa” result on success, or a “ploinkk” if errors are found (customisable).
if you wish, you can display the report results graphically and categorised, inside a separate css/cse html validator window.

here’s a short step by step guide:
(including screenshots, so that you can have a look at all the results first, to see whether you like it, or you are still missing some features)

installing css cse html validator:

go to the CSS HTML Validator for Windows website: https://www.htmlvalidator.com/download/
scroll down and download the free CSE HTML Validator Standard for Personal Use
(direct link for cse-html-validator-170501personal-setup.exe at download-cnet-com >>> here <<<)
install cse-html-validator-170501personal-setup.exe using default settings.

notepad++ preparation:

add the following 2 lines anywhere in your notepad++ shortcuts.xml, at the <UserDefinedCommands> section.
(now that’s simple, as you already know where your’s is, and these paths are already your real paths 😉 so you can use them straight away)

<Command name="Open with CSS CSE HTML Validator" Ctrl="no" Alt="no" Shift="no" Key="0">"%ProgramFiles(x86)%\HTMLValidator170\cmdlineprocessor.exe" -o "$(FULL_CURRENT_PATH)"</Command>
		
<Command name="Validate with CSS CSE HTML Validator" Ctrl="no" Alt="no" Shift="no" Key="0">"%ProgramFiles(x86)%\HTMLValidator170\cmdlineprocessor.exe" -v "$(FULL_CURRENT_PATH)"</Command>

your shortcuts.xml should now look like this screenshot (plus the modifications you already have):

Imgur

css/cse html validator preparation:

restart notepad++ and open any .css file (or html file, etc) for testing.
go to the menu run > Open with CSS CSE HTML Validator as seen at the screenshot below:

Imgur

at the css/cse html validator, go to the menu validate options > default validation mode and select fullas seen at the screenshot below:

Imgur

now hit validate to make a test run on your css.
the categorical result page now looks like this:

Imgur

now go to the menu validate options > validator engine options as seen here:

Imgur

at the validator engine options, go to accessibility > classic and set the output viewer by browsing and selecting your notepad++.exe
(in your case it’s C:\Program Files\Notepad++\notepad++.exe, as seen in your log)
screenshot of the validator engine options window:

Imgur

important: hit save now before you press ok or your settings will be lost.
close the css/cse html validator window.
we’re done now with the setup.

basic usage:

open a .css or any other file you want to analyse and go to run > Validate with CSS CSE HTML Validator to run a test on it.

Imgur

a new notepad++ tab will open, displaying your complete validation results, with clear text explanations of every warning, understandable suggestions on what to corrector, and much more 👍:

Imgur

notes:

currently you have to save your file, before you run a validation test, but this can be done automatically in the future, using the functions @PeterJones posted above, eg. by using macros (one click save and run validate) or nppexec (save and run validate, or, a bit tricky: run validate on every save).

the report results can be colour highlighted in the future by creating a custom user defined language (udl), if you like what you see until now.

sidenote to @Alan-Kilborn

I think you will like it and you won’t “prefer to use another solution”.

i think you’re right again 😂

Alan Kilborn

@Meta-Chuh

Wow. Above and beyond, Meta-Chuh, above and beyond…

Meta Chuh

@Alan-Kilborn

thanks, i guess i just had a little “claudianic” attack to dig into something i never used and probably will never use myself, just to try out how it could be done, and also triggered by a high level of participation of the original poster towards regulars. (i think it’s more fun and worth it, if we get that much response, especially if it is as readable and clear as in this case 👍)

btw trigger: i’m currently listening to this triggered by your post 😉👍

Demetrius Pinheiro

@Meta-Chuh … wowwwww, impressive presentation and explanation… I don’t know how to thank you, but thank you!

I’ll try to test it ASAP during the next week, and I will be back to you with the result.

Based on the images and explanations you posted, I will say that this solution (team effort with @Eko-palypse and @PeterJones) seems to be 80% what I was looking for (where 80% is excellent). It seems to be a very usable solution, with a very powerful validator. Also, it seems to work inside NP++ as I wanted.
So, what do I need for the 100%?.. answer: the real-time validator. It is very handy to have a real-time validator, which corrects and makes suggestions in real-time. I have this at Stylus (extension), so will love to have the same at NP++. Today I was in contact with a Dev through GitHub, and he said that will try to build a real-time CSS’ editor plugin for NP++. It is not a promise, but at least it will be a good try. And if he can build that, it will be for the benefit of all NP++’ users. Anyway, until then, I certainly will test your solution.

Once again, thank you and congratulations for such nice presentation and explanation.

Meta Chuh

thanks @Demetrius-Pinheiro
i guess we’re looking forward to hear if it stays at 80% or if it slowly decreases while testing 😉

regarding realtime validation:
from a coding perspective, it should be possible for your dev, without creating an own engine, if he uses css/cse validator, or any other integrable validation engine, and the plugin basically just acts as a real time communication bridge between the validation engine and the editor and cursor, with it’s highlighting and overlays.

maybe following api docs are of use to him, if he wants to try this specific engine, as it is very well documented.

fast cgi integration:
https://www.htmlvalidator.com/support/developer.html

dll integration:
https://www.htmlvalidator.com/support/developervalidatordll.html

command line reference:
https://www.htmlvalidator.com/2019/docs/index.html?command_line.htm
https://www.htmlvalidator.com/v170/docs/index.html?command_line.htm

side note: i’m not affiliated with htmlvalidator.com in any ways, and today was the first day i’ve visited their page and used one of their products.