Publié initialement à : https://korben.info/code-notes-un-gestionnaire-de-code-snippets-🚀-simple-mais-efficace.html
Développé par Laurent THIEBAULT, ce gestionnaire en Electron et Vue.js va vous permettre de conserver vos bouts de code sous la main.
Code Notes est plutôt bien pensé, car il est capable de gérer la coloration syntaxique de plusieurs langages, mais offre aussi de la complétion qui vous permettra de coder directement vos snippets dans l'outil sans perdre de temps. (Pour comprendre de quoi je parle exactement, regardez la vidéo)
https://youtu.be/WiTLEyDYex4C'est un outil qui en est à ses débuts, mais il est déjà bien pratique. Laurent ne compte pas s'arrêter là et prévoit déjà d'autres fonctionnalités plutôt cool comme :
- L'intégration des Github Gists
- La possibilité d'ajouter des tags sur les snippets
- Grouper les snippets (dans des dossiers)
- Ajouter des raccourcis clavier pour améliorer la productivité
Je suggère aussi à Laurent d'intégrer un système de backup ou de stockage en ligne des snippets pour pouvoir utiliser la même bibliothèque sur plusieurs machines et je souhaite donc à Code Notes une belle et longue vie !
@import url(https://fonts.googleapis.com/css?family=BenchNine:700); .snip1582 { background-color: #ff7b10; border: none; color: #ffffff; cursor: pointer; display: inline-block; font-family: 'BenchNine', Arial, sans-serif; font-size: 1em; font-size: 22px; line-height: 1em; margin: 15px 40px; outline: none; padding: 12px 40px 10px; position: relative; text-transform: uppercase; font-weight: 700; } .snip1582:before, .snip1582:after { border-color: transparent; -webkit-transition: all 0.25s; transition: all 0.25s; border-style: solid; border-width: 0; content: ""; height: 24px; position: absolute; width: 24px; } .snip1582:before { border-color: #ff7b10; border-top-width: 2px; left: 0px; top: -5px; } .snip1582:after { border-bottom-width: 2px; border-color: #ff7b10; bottom: -5px; right: 0px; } .snip1582:hover, .snip1582.hover { background-color: #ff7b10; } .snip1582:hover:before, .snip1582.hover:before, .snip1582:hover:after, .snip1582.hover:after { height: 100%; width: 100%; } .sniplink { background: none !important; } Télecharger Code Notes