hideout-lastation.com
Paradis Pour Les Concepteurs Et Les Développeurs


Comment ajouter des styles au contenu TinyMCE et Markdown

Beaucoup d'auteurs préfèrent travailler dans Markdown parce que c'est un langage plus simple avec moins d'obstacles à gravir. Certes, il est loin d'être parfait, mais il offre une vision plus nette de votre texte avec la facilité d' exporter en HTML .

Malheureusement, les styles Markdown par défaut sont généralement assez ennuyeux. Mais avec la bibliothèque wysiwyg.css, vous pouvez avoir un document dynamique en un rien de temps.

Cette bibliothèque CSS gratuite transforme tout votre contenu de base TinyMCE ou Markdown en blocs HTML formatés et faciles à lire .

Vous n'avez besoin de connaître aucun HTML / CSS complexe pour utiliser ce plugin. Enveloppez simplement le contenu généré dans un div avec la classe .wysiwyg, et vous êtes tous ensemble.

La vraie difficulté est de construire une application qui automatiserait ce processus, ou d'ajouter cette bibliothèque sur le backend pour un panneau d'administration utilisateur.

Cependant, les possibilités sont infinies, et vous pourriez même l'utiliser pour l'écriture locale si vous préférez exporter votre contenu de Markdown au HTML .

Par défaut, cette bibliothèque CSS prend en charge toutes les balises HTML majeures imaginables. Cela inclut tous les en-têtes, listes, liens, étiquettes pré / code, chiffres et même des tags semi-obscurs comme et. Il y a une liste complète dans le repo GitHub si vous voulez le vérifier.

Si vous définissez vos propres styles typographiques, ceux-ci peuvent même réécrire les paramètres par défaut dans la feuille de style. Vous pouvez ainsi obtenir tous les avantages de wysiwyg.css avec vos propres choix de polices .

La bibliothèque ne pouvait pas être plus facile à configurer non plus. Il suffit de télécharger une copie localement ou de la récupérer directement à l' aide de npm install wysiwyg.css

De là, vous incluez simplement le fichier CSS dans votre tête de document, et laissez-le s'exécuter. Cela ne ciblera que le contenu d' un conteneur avec la classe .wysiwyg, donc cette classe devrait envelopper n'importe quel conteneur.

La bibliothèque est toujours mise à jour semi-fréquemment, vous pouvez donc trouver des mises à jour récentes dans le dépôt principal GitHub. Et si vous avez des suggestions ou des idées pour de nouvelles mises à jour, n'hésitez pas à partager avec le créateur Jeremy Thomas sur sa page Twitter @jgthms.

Émulation mobile dans Google Chrome

Émulation mobile dans Google Chrome

Simplement dit, nous aimons Google Chrome. Il fonctionne bien, semble simple, et a de nombreuses applications utiles. Du point de vue du développeur, Google Chrome a toujours une longueur d'avance en termes de support du dernier standard Web, ce qui est super.Il est également livré avec un certain nombre d'outils pour le développement Web, dont certains doivent encore être mis en œuvre dans d'autres outils de développement intégrés de navigateur . Ceux-ci

(Conseils techniques et de conception)

Valider les entrées de formulaire facilement sur n'importe quel navigateur avec Validatr

Valider les entrées de formulaire facilement sur n'importe quel navigateur avec Validatr

Traiter des formulaires sur le Web peut être très intéressant. Vous pouvez faire beaucoup de personnalisation dans la conception, sur l'étiquette et même sur l'authentification. Avec beaucoup de nouvelles fonctionnalités disponibles en HTML5, Jay Morrow a créé Validatr qui s'appuie sur les nouveaux attributs d'entrée HTML5 pour effectuer une validation de formulaire simple et automatique.Validatr

(Conseils techniques et de conception)