Mettre un peu de couleurs dans Notepad++

Retournez à Accueil /

30 09 2015

Mettre un peu de couleurs dans Notepad++

Logiciel Libre Open Source

La coloration syntaxique est un excellent outil pour se repérer facilement et rapidement dans du code.

Mais il n'est pas toujours simple de trouver un code couleur efficace ou une typographie facile à lire et à déchiffrer.

Mise à jour le 30/09/2015

Je vous propose donc l'amélioration d'un thème pour Notepad++, mon éditeur de texte favori.

Il est fortement inspiré du thème BlackBoard, le tout sauce couleurs Flat design (couleurs assez marquées).

Je suis resté bref et il est loin d'être fini, mais je vous le laisse pour en faire un squelette de travail vers un thème vous satisfaisant plus.

La police passe de Déjà Vu Sans à Hack, téléchargeable avec le lien suivant : sourcefoundry.org/hack/.

Dans un style plus manuscrite, il existe Fantasque Sans Mono, disponible ici : github.com/belluzj/fantasque-sans.

Typographie que je trouve assez agréable à lire et donc les glyphes sont marqués (différence entre 0 zéro et 0 o majuscule, ...), elle d'autant plus gratuite et libre de droit.

Merci la Ferme du Web pour la découverte.

J'ai aussi harmonisé la taille et l'appel de la police pour que l'on puisse faire plus facilement un rechercher/modifier.

Si tout n'est pas fini ou parfait, j'ai vérifié la validité du XML, l'ancien avait des erreurs.

Mise à jour du 30/09/2015 :

J'ai, encore une fois, revu totalement le code couleur en passant par le biais du Material Design de Google.

La raison est simple, celui-ci me proposait plus de dégradés, de ton sur ton et de couleurs en général.
Je suis resté dans l'esprit de l'original, mais j'ai aussi mieux harmonisé le tout et amélioré le code couleur.

Le thème Ortegeek, colorisé par lui-même, en png sur Ortegeek. Too Many Inception.

D'ailleurs, si vous vous posez des questions sur la typographie, un élément qu'il ne faut JAMAIS laisser pour compte, voici le lien d'un article de coreight qui pourra vous éclairer :

Petit guide des polices et de la typographie

Télécharger le fichier : notepad_ortegeek.7z

<?xml version="1.0" encoding="Windows-1252" ?>
<!--//

Ortegeek
Copyright (c) 2015 ORTEGA Guillaume <http://ortegeek.fr/>

Permission is hereby granted, free of charge, to any person
obtaining a copy of this software and associated documentation
files (the "Software"), to deal in the Software without
restriction, including without limitation the rights to use,
copy, modify, merge, publish, distribute, sublicense, and/or sell
copies of the Software, and to permit persons to whom the
Software is furnished to do so, subject to the following
conditions:

The above copyright notice and this permission notice shall be
included in all copies or substantial portions of the Software.

THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES
OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND
NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT
HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY,
WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING
FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR
OTHER DEALINGS IN THE SOFTWARE.

Requirements:
    * This style is based on Hack fonts <http://sourcefoundry.org/hack/>.
    * Notepad++, of course.

Installation:
    Copy this file to C:\Documents and Settings\%%USERNAME%%\Application Data\Notepad++\

About:
    Ortegeek is a update and individualized version of Blackboard styler.
    Original style is based on DejaVu fonts <http://dejavu.sourceforge.net/wiki/index.php/Main_Page>.
	This style is based on Hack fonts <https://github.com/belluzj/fantasque-sans>.
	This style use Material design color <https://www.google.com/design/spec/style/color.html>

Credits:
    Thanks for Fabio Zendhi Nagao for the tmTheme2nppStyler and Blackboard styler.

//-->
<NotepadPlus>
    <LexerStyles>
        <LexerType name="html" desc="HTML" ext="">
            <WordsStyle name="DEFAULT" styleID="0" fgColor="F8F8F8" bgColor="212121" fontName="Hack" fontStyle="0" fontSize="10" />
            <WordsStyle name="COMMENT" styleID="9" fgColor="607D8B" bgColor="212121" fontName="Hack" fontStyle="0" fontSize="10" />
            <WordsStyle name="NUMBER" styleID="5" fgColor="AED581" bgColor="212121" fontName="Hack" fontStyle="0" fontSize="10" />
            <WordsStyle name="DOUBLESTRING" styleID="6" fgColor="8BC34A" bgColor="212121" fontName="Hack" fontStyle="0" fontSize="10" />
            <WordsStyle name="SINGLESTRING" styleID="7" fgColor="AED581" bgColor="212121" fontName="Hack" fontStyle="0" fontSize="10" />
            <WordsStyle name="TAG" styleID="1" fgColor="FF9800" bgColor="212121" fontName="Hack" fontStyle="0" fontSize="10" />
            <WordsStyle name="TAGEND" styleID="11" fgColor="FF9800" bgColor="212121" fontName="Hack" fontStyle="0" fontSize="10" />
            <WordsStyle name="TAGUNKNOWN" styleID="2" fgColor="FFB74D" bgColor="212121" fontName="Hack" fontStyle="0" fontSize="10" />
            <WordsStyle name="ATTRIBUTE" styleID="3" fgColor="F44336" bgColor="212121" fontName="Hack" fontStyle="0" fontSize="10" />
            <WordsStyle name="ATTRIBUTEUNKNOWN" styleID="4" fgColor="E57373" bgColor="212121" fontName="Hack" fontStyle="0" fontSize="10" />
            <WordsStyle name="SGMLDEFAULT" styleID="21" fgColor="FF9800" bgColor="212121" fontName="Hack" fontStyle="0" fontSize="10" />
            <WordsStyle name="CDATA" styleID="17" fgColor="FF5722" bgColor="212121" fontName="Hack" fontStyle="0" fontSize="10" />
            <WordsStyle name="VALUE" styleID="19" fgColor="FF5722" bgColor="212121" fontName="Hack" fontStyle="0" fontSize="10" />
            <WordsStyle name="ENTITY" styleID="10" fgColor="CDDC39" bgColor="212121" fontName="Hack" fontStyle="0" fontSize="10" />
        </LexerType>
        <LexerType name="php" desc="PHP" ext="">
            <WordsStyle name="QUESTION MARK" styleID="18" fgColor="F8F8F8" bgColor="607D8B" fontName="Hack" fontStyle="0" fontSize="10" />
            <WordsStyle name="DEFAULT" styleID="118" fgColor="F8F8F8" bgColor="212121" fontName="Hack" fontStyle="0" fontSize="10" />
            <WordsStyle name="STRING" styleID="119" fgColor="00BCD4" bgColor="212121" fontName="Hack" fontStyle="0" fontSize="10">the_ID the_post have_posts wp_link_pages the_content</WordsStyle>
            <WordsStyle name="STRING VARIABLE" styleID="126" fgColor="E91E63" bgColor="212121" fontName="Hack" fontStyle="4" fontSize="10" />
            <WordsStyle name="SIMPLESTRING" styleID="120" fgColor="4DD0E1" bgColor="212121" fontName="Hack" fontStyle="0" fontSize="10" />
            <WordsStyle name="WORD" styleID="121" fgColor="FFC107" bgColor="212121" fontName="Hack" fontStyle="0" fontSize="10" keywordClass="instre1">var_dump htmlspecialchars_decode str_replace str_pad getenv is_numeric fetch_assoc query</WordsStyle>
            <WordsStyle name="NUMBER" styleID="122" fgColor="F44336" bgColor="212121" fontName="Hack" fontStyle="0" fontSize="10">$_POST $_GET $_SESSION</WordsStyle>
            <WordsStyle name="VARIABLE" styleID="123" fgColor="9575CD" bgColor="212121" fontName="Hack" fontStyle="2" fontSize="10" />
            <WordsStyle name="COMMENT" styleID="124" fgColor="607D8B" bgColor="212121" fontName="Hack" fontStyle="1" fontSize="10" />
            <WordsStyle name="COMMENTLINE" styleID="125" fgColor="607D88" bgColor="212121" fontName="Hack" fontStyle="1" fontSize="10" />
            <WordsStyle name="OPERATOR" styleID="127" fgColor="FFA000" bgColor="212121" fontName="Hack" fontStyle="0" fontSize="10" />
        </LexerType>
        <LexerType name="javascript" desc="Javascript" ext="">
            <WordsStyle name="DEFAULT" styleID="41" fgColor="F8F8F8" bgColor="212121" fontName="Hack" fontStyle="0" fontSize="10" />
            <WordsStyle name="NUMBER" styleID="45" fgColor="F44336" bgColor="212121" fontName="Hack" fontStyle="0" fontSize="10" />
            <WordsStyle name="WORD" styleID="46" fgColor="F8F8F8" bgColor="212121" fontName="Hack" fontStyle="0" fontSize="10" />
            <WordsStyle name="KEYWORD" styleID="47" fgColor="FFC107" bgColor="212121" fontName="Hack" fontStyle="0" fontSize="10" keywordClass="instre1">alert appendChild arguments array blur checked childNodes className confirm dialogArguments event focus getElementById getElementsByTagName innerHTML keyCode length location null number parentNode push RegExp replace selectNodes selectSingleNode setAttribute split src srcElement test undefined value window</WordsStyle>
            <WordsStyle name="DOUBLESTRING" styleID="48" fgColor="E91E63" bgColor="212121" fontName="Hack" fontStyle="0" fontSize="10">XmlUtil loadXmlString TopologyXmlTree NotificationArea loadXmlFile debug</WordsStyle>
            <WordsStyle name="SINGLESTRING" styleID="49" fgColor="F06292" bgColor="212121" fontName="Hack" fontStyle="0" fontSize="10" />
            <WordsStyle name="SYMBOLS" styleID="50" fgColor="FFA000" bgColor="212121" fontName="Hack" fontStyle="0" fontSize="10" />
            <WordsStyle name="STRINGEOL" styleID="51" fgColor="CDDC39" bgColor="212121" fontName="Hack" fontStyle="0" fontSize="10" />
            <WordsStyle name="REGEX" styleID="52" fgColor="CDDC39" bgColor="212121" fontName="Hack" fontStyle="0" fontSize="10" />
            <WordsStyle name="COMMENT" styleID="42" fgColor="607D87" bgColor="212121" fontName="Hack" fontStyle="1" fontSize="10" />
            <WordsStyle name="COMMENTLINE" styleID="43" fgColor="607D87" bgColor="212121" fontName="Hack" fontStyle="1" fontSize="10" />
            <WordsStyle name="COMMENTDOC" styleID="44" fgColor="009688" bgColor="212121" fontName="Hack" fontStyle="1" fontSize="10" />
        </LexerType>
        <LexerType name="xml" desc="XML" ext="">
            <WordsStyle name="XMLSTART" styleID="12" fgColor="7F90AA" bgColor="212121" fontName="Hack" fontStyle="0" fontSize="10" />
            <WordsStyle name="XMLEND" styleID="13" fgColor="7F90AA" bgColor="212121" fontName="Hack" fontStyle="0" fontSize="10" />
            <WordsStyle name="DEFAULT" styleID="0" fgColor="F8F8F8" bgColor="212121" fontName="Hack" fontStyle="0" fontSize="10" />
            <WordsStyle name="COMMENT" styleID="9" fgColor="AEAEAE" bgColor="212121" fontName="Hack" fontStyle="0" fontSize="10">import</WordsStyle>
            <WordsStyle name="NUMBER" styleID="5" fgColor="D8FA3C" bgColor="212121" fontName="Hack" fontStyle="0" fontSize="10">import</WordsStyle>
            <WordsStyle name="DOUBLESTRING" styleID="6" fgColor="61CE3C" bgColor="212121" fontName="Hack" fontStyle="0" fontSize="10" />
            <WordsStyle name="SINGLESTRING" styleID="7" fgColor="61CE3C" bgColor="212121" fontName="Hack" fontStyle="0" fontSize="10" />
            <WordsStyle name="TAG" styleID="1" fgColor="FF6400" bgColor="212121" fontName="Hack" fontStyle="0" fontSize="10" />
            <WordsStyle name="TAGEND" styleID="11" fgColor="FF6400" bgColor="212121" fontName="Hack" fontStyle="0" fontSize="10" />
            <WordsStyle name="TAGUNKNOWN" styleID="2" fgColor="FF6400" bgColor="212121" fontName="Hack" fontStyle="0" fontSize="10" />
            <WordsStyle name="ATTRIBUTE" styleID="3" fgColor="FF6400" bgColor="212121" fontName="Hack" fontStyle="0" fontSize="10" />
            <WordsStyle name="ATTRIBUTEUNKNOWN" styleID="4" fgColor="FF6400" bgColor="212121" fontName="Hack" fontStyle="0" fontSize="10" />
            <WordsStyle name="SGMLDEFAULT" styleID="21" fgColor="61CE3C" bgColor="212121" fontName="Hack" fontStyle="0" fontSize="10" />
            <WordsStyle name="CDATA" styleID="17" fgColor="D8FA3C" bgColor="212121" fontName="Hack" fontStyle="0" fontSize="10" />
        </LexerType>
        <LexerType name="ini" desc="ini file" ext="">
            <WordsStyle name="DEFAULT" styleID="0" fgColor="F8F8F8" bgColor="212121" fontName="Hack" fontStyle="0" fontSize="10" />
            <WordsStyle name="COMMENT" styleID="1" fgColor="AEAEAE" bgColor="212121" fontName="Hack" fontStyle="0" fontSize="10" />
            <WordsStyle name="SECTION" styleID="2" fgColor="FF6400" bgColor="212121" fontName="Hack" fontStyle="0" fontSize="10" />
            <WordsStyle name="ASSIGNMENT" styleID="3" fgColor="FBDE2D" bgColor="212121" fontName="Hack" fontStyle="0" fontSize="10">import</WordsStyle>
            <WordsStyle name="DEFVAL" styleID="4" fgColor="FF6400" bgColor="212121" fontName="Hack" fontStyle="0" fontSize="10">import</WordsStyle>
        </LexerType>
        <LexerType name="css" desc="CSS" ext="">
            <WordsStyle name="DEFAULT" styleID="0" fgColor="F8F8F8" bgColor="212121" fontName="Hack" fontStyle="0" fontSize="10" />
            <WordsStyle name="TAG" styleID="1" fgColor="FF9800" bgColor="212121" fontName="Hack" fontStyle="0" fontSize="10" />
            <WordsStyle name="CLASS" styleID="2" fgColor="F44336" bgColor="212121" fontName="Hack" fontStyle="0" fontSize="10" />
            <WordsStyle name="PSEUDOCLASS" styleID="3" fgColor="BA68C8" bgColor="212121" fontName="Hack" fontStyle="0" fontSize="10" />
            <WordsStyle name="UNKNOWN_PSEUDOCLASS" styleID="4" fgColor="9575CD" bgColor="212121" fontName="Hack" fontStyle="0" fontSize="10" />
            <WordsStyle name="OPERATOR" styleID="5" fgColor="FFA000" bgColor="212121" fontName="Hack" fontStyle="0" fontSize="10" />
            <WordsStyle name="IDENTIFIER" styleID="6" fgColor="42A5F5" bgColor="212121" fontName="Hack" fontStyle="0" fontSize="10" keywordClass="instre1" colorStyle="1" />
            <WordsStyle name="UNKNOWN_IDENTIFIER" styleID="7" fgColor="29B6F6" bgColor="212121" fontName="Hack" fontStyle="0" fontSize="10" />
            <WordsStyle name="VALUE" styleID="8" fgColor="FFC107" bgColor="212121" fontName="Hack" fontStyle="0" fontSize="10" />
            <WordsStyle name="COMMENT" styleID="9" fgColor="607D88" bgColor="212121" fontName="Hack" fontStyle="1" fontSize="10" />
            <WordsStyle name="ID" styleID="10" fgColor="8BC34A" bgColor="212121" fontName="Hack" fontStyle="0" fontSize="10" />
            <WordsStyle name="IMPORTANT" styleID="11" fgColor="BA68C8" bgColor="212121" fontName="Hack" fontStyle="0" fontSize="10" />
            <WordsStyle name="DIRECTIVE" styleID="12" fgColor="FFC107" bgColor="212121" fontName="Hack" fontStyle="0" fontSize="10" />
        </LexerType>
    </LexerStyles>
    <GlobalStyles>
        <!-- Attention : Don't modify the name of styleID="0" -->
        <WidgetStyle name="Global override" styleID="0" fgColor="FFFFFF" bgColor="212121" fontName="Hack" fontStyle="0" fontSize="10" />
        <WidgetStyle name="Default Style" styleID="32" fgColor="F8F8F8" bgColor="212121" fontName="Hack" fontStyle="0" fontSize="10" />
        <WidgetStyle name="Indent guideline style" styleID="37" fgColor="858585" bgColor="212121" fontName="Hack" fontStyle="0" fontSize="10" />
        <WidgetStyle name="Brace highlight style" styleID="34" fgColor="FFA000" bgColor="212121" fontName="Hack" fontStyle="1" fontSize="10" />
        <WidgetStyle name="Bad brace colour" styleID="35" fgColor="F44336" bgColor="212121" fontName="Hack" fontStyle="0" fontSize="10" />
        <WidgetStyle name="Current line background colour" styleID="0" bgColor="424242" fgColor="FFFFFF" fontSize="" fontStyle="0" />
        <WidgetStyle name="Mark colour" styleID="0" fgColor="CC0000" bgColor="EDD400" fontStyle="0" />
        <WidgetStyle name="Selected text colour" styleID="0" bgColor="253B76" fgColor="8000FF" fontStyle="0" />
        <WidgetStyle name="Caret colour" styleID="2069" fgColor="FFFFFF" bgColor="112435" fontSize="10" fontStyle="0" />
        <WidgetStyle name="Find Mark Style" styleID="31" fgColor="CC0000" bgColor="EDD400" fontName="" fontStyle="0" fontSize="10" />
        <WidgetStyle name="Edge colour" styleID="0" fgColor="EEEEEC" bgColor="F3F3F3" fontSize="10" fontStyle="0" />
        <WidgetStyle name="Line number margin" styleID="33" fgColor="EEEEEC" bgColor="2E3436" fontName="" fontStyle="0" fontSize="8" />
        <WidgetStyle name="Fold" styleID="0" fgColor="2E3436" bgColor="EEEEEC" fontSize="9" fontStyle="0" />
        <WidgetStyle name="Fold margin" styleID="0" fgColor="555753" bgColor="2E3436" fontStyle="0" />
        <WidgetStyle name="White space symbol" styleID="0" fgColor="FCAF3E" bgColor="FF0000" fontSize="9" fontStyle="1" />
        <WidgetStyle name="Smart HighLighting" styleID="29" bgColor="00FF00" fgColor="555753" fontSize="9" fontStyle="0" />
        <WidgetStyle name="Find Mark Style" styleID="31" bgColor="EDD400" fgColor="CC0000" fontName="" fontSize="10" fontStyle="0" />
        <WidgetStyle name="Mark Style 1" styleID="25" bgColor="00FFFF" fgColor="80D4B2" fontStyle="0" />
        <WidgetStyle name="Mark Style 2" styleID="24" bgColor="FF8000" fgColor="FAAA3C" fontStyle="0" />
        <WidgetStyle name="Mark Style 3" styleID="23" bgColor="FFFF00" fgColor="FFFF80" fontSize="9" fontStyle="0" />
        <WidgetStyle name="Mark Style 4" styleID="22" bgColor="8000FF" fgColor="000000" fontSize="9" fontStyle="0" />
        <WidgetStyle name="Mark Style 5" styleID="21" bgColor="008000" fgColor="808080" fontStyle="0" />
        <WidgetStyle name="Incremental highlight all" styleID="28" bgColor="0080FF" fgColor="FFCAB0" fontStyle="0" />
        <WidgetStyle name="Tags match highlighting" styleID="27" bgColor="8000FF" fgColor="000000" fontStyle="0" />
        <WidgetStyle name="Tags attribute" styleID="26" bgColor="FFFF00" fgColor="8080C0" fontStyle="0" />
        <WidgetStyle name="Active tab focused indicator" styleID="0" fgColor="FAAA3C" bgColor="FF0000" fontStyle="0" />
        <WidgetStyle name="Active tab unfocused indicator" styleID="0" fgColor="FFCAB0" bgColor="80FF00" fontStyle="0" />
        <WidgetStyle name="Active tab text" styleID="0" fgColor="000000" bgColor="8000FF" fontStyle="0" />
        <WidgetStyle name="Inactive tabs" styleID="0" fgColor="808080" bgColor="C0C0C0" fontStyle="0" />
    </GlobalStyles>
</NotepadPlus>

Alors oui, le fichier porte mon nom, mais ne vous inquiétez pas, je garde la tête sur les épaules.

Je laisse aussi une photo pour justifier le choix des couleurs :