Code Notes - Un gestionnaire de code snippets 🚀 simple mais efficace

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/WiTLEyDYex4

C'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