Comment créer des démarques sans effort avec TextSoap

TextSoap est un utilitaire précieux que je trouve de plus en plus utile. Il est livré avec des nettoyeurs de texte spéciaux - de petites routines pour le traitement de texte.

Dans ce tutoriel, je présenterai TextSoap et créerai un nettoyeur de texte personnalisé pour le traitement d’un article rédigé dans Markdown afin de le rendre prêt à être ajouté à WordPress..


Le cas d'utilisation

Quand j'écris, j'aime voir les mots. Lorsque vous écrivez pour le Web, vous avez souvent besoin d'un type de balisage pour styler votre texte. Heureusement, il y a Markdown pour baliser le texte, mais pas pour le cacher.

De nombreux systèmes de gestion de contenu, ou CMS, tels que WordPress, n'acceptent pas directement le démarquage. Par conséquent, de nombreuses tâches de traduction, d’ajout et autres sont nécessaires pour préparer le texte en vue de sa publication. Cela peut être un gâchis fastidieux. Surtout si vous devez le faire souvent.

Tout en travaillant sur certains articles, pour Tuts +, j'ai décidé d'automatiser le processus de conversion de texte. Voilà où la puissance de TextSoap brille vraiment.


Commencer

Lorsque vous démarrez TextSoap, l’écran principal s’affiche..

Il contient la zone de travail à gauche et la liste des nettoyeurs de texte à droite. Si vous avez déjà des éléments dans votre presse-papiers, ils seront automatiquement placés dans la zone de travail..


Fenêtre principale de TextSoap

appuyez sur la Edit Cleaners pour ouvrir l'éditeur de nettoyeur personnalisé. C'est la zone de travail pour créer un nettoyeur personnalisé. Il montrera le contenu du dernier nettoyeur édité. Comme vous pouvez le constater, j'ai de nombreux nettoyants personnalisés.


TextSoap Edit Custom Cleaner Window

En appuyant sur + bouton en bas à gauche va créer un nouveau nettoyant. Nomme le Markdown to Article. L'étape suivante consiste à créer le nettoyeur. La zone centrale contient la liste des nettoyants à appliquer. Il est actuellement vide, mais pas pour longtemps. Le côté droit contient toutes les actions disponibles que vous pouvez ajouter au nettoyeur..


Créer un nouveau nettoyeur

Vous pouvez ajouter une action en en faisant glisser une de la liste de droite vers la position souhaitée. Chaque action placée dans la zone centrale s’appliquera une à une en commençant par le haut de l’écran. Par conséquent, chaque fois qu’il traite un bloc dans le nettoyeur, il parcourt en fait tout le texte..

La zone jaune sous la zone de travail intermédiaire sert à ajouter des commentaires. Lorsque vous ajoutez un nettoyant à la zone centrale, vous pouvez ajouter une description plus lisible de ce que vous faites avec ce nettoyeur. Cela facilite le suivi du nettoyeur et son édition ultérieure.!

Comme chaque bloc passe par chaque ligne de texte à traiter, plus vous utilisez de blocs dans votre nettoyeur, plus le processus de nettoyage est long. Par conséquent, il est préférable de limiter le nombre de blocs au minimum requis..


Ajouter Réduction Nettoyeur

La première chose à faire est de convertir le texte de démarquage en HTML. Regardez la liste des nettoyants sur le côté droit. Juste au-dessus de la liste se trouve un champ de recherche. Type marque et un nettoyeur apparaîtra Markdown Text. Faites glisser celui-ci dans la zone centrale. Cela le fait pour convertir de Markdown en HTML.

Ce nettoyeur, malheureusement, ne produit pas le format exact de HTML nécessaire. C’est ce que le reste du nettoyeur fera.


Supprimer les balises de paragraphe HTML

WordPress ne souhaitant pas que vous mettiez des balises de paragraphe, elles doivent être supprimées. Faites glisser le Regex Rechercher et remplacer le texte plus propre au milieu juste après la Markdown Text bloc. Dans la première zone de texte, placez ce qui est recherché: \<[/]*p\>. Il s'agit d'une expression régulière permettant de détecter une balise de paragraphe en ouverture ou en fermeture. La deuxième zone de texte est ce qui doit remplacer la chaîne correspondante. Il suffit de laisser vide pour supprimer les balises.

Pointe: Si vous n’êtes pas à l'aise avec les expressions régulières, lisez-le. Vous ne savez rien sur les expressions régulières: un guide complet.

Chaque Regex Rechercher et remplacer block doit être configuré pour ignorer la casse. Par conséquent, cliquez sur le Les options bouton et vérifier ignorer le cas. Vous verrez un je placé juste après le bouton.


Ajouter des classes aux figures

Ensuite, toutes les étiquettes de figure doivent avoir le tutorial-image classe associée à elle. Alors, prenez-en un autre Regex Rechercher et remplacer le texte et placez-le sous le dernier. Dans la première zone de texte, placez \ . Dans le deuxième bloc de texte, placez

. N'oubliez pas le paramètre Ignore Case!


Correction des tags H2: Ajout
tag avant

Le standard d’écriture pour Tuts + est d’avoir un


tag avant chaque en-tête. Pour ce faire, vous devez ajouter un autre Regex Rechercher et remplacer le texte bloquer avec la zone de texte de recherche contenant ( et la zone de texte de remplacement contenant
1 $
. Cela cherchera simplement tous les

tag devant.


Correction des tags H2: Suppression des identifiants

Le convertisseur de démarques mettra toujours une balise ID dans la balise d’en-tête. Mais, la norme dit pas d'identifiant! Ils doivent partir. Encore une fois, obtenez un Regex Rechercher et remplacer le texte bloquer avec ] *> dans le champ de recherche et

dans le champ de texte de remplacement. Cela cherchera pour chaque

tag n'importe ce qui est au milieu et le remplacer par une simple plaine

étiquette.


Correction de l'adresse source de l'image

Lorsque vous téléchargez des images dans WordPress, elles sont toujours placées dans un répertoire spécifique, une année à quatre chiffres et un mois à deux chiffres avant le nom du fichier. Comme il se trouve toujours dans un emplacement prévisible, une recherche et un remplacement peuvent être utilisés pour le configurer. Avant de nettoyer le texte, veillez à définir l'année et le mois en fonction du moment où vous avez téléchargé les images pour l'article..

Cette fois, placez un Rechercher et remplacer du texte dans la partie centrale avec le premier champ de texte contenant . Cela trouve essentiellement une balise d'image et remplace tout ce qui précède le nom du fichier par le chemin Web approprié du fichier..

Cette implémentation pose un problème: le mois et l'année doivent être modifiés chaque fois que le mois et / ou l'année change pour vos articles. TextSoap n’ayant pas de système de mémoire dynamique, il doit être modifié manuellement à chaque fois..


Fixation Divers Tags d'ancrage

Lorsque vous avez une balise d'ancrage pour télécharger un élément chargé à partir de la zone multimédia de WordPress, vous devez également corriger ces adresses. Par conséquent, il suffit de répéter le précédent Rechercher et remplacer du texte bloquer avec la première zone de texte contenant \ et la deuxième zone de texte contenant .


Les titres

La dernière chose qui doit être fixée est les titres. Tuts + exige que tous les titres soient mis en casse. Mais, tous les cas de titre ne sont pas les mêmes. Il existe une petite application Web permettant de créer le titre des en-têtes spécialement conçu pour Tuts +. L'examen du code JavaScript révèle qu'il est souhaitable que les mots suivants soient toujours en minuscule: a, un, et, comme, à, mais par, en, pour, si, dans, de, sur, ou, le, à, vs, vs, et via. Sauf si l'un de ces mots est le premier mot d'un titre, il doit être mis en majuscule.


Fixing Title Case: Expression rationnelle

Sélectionnez un Si le texte correspond bloquer et faire glisser vers le centre comme ci-dessus. Dans la zone de texte, placez cette chaîne d'expression régulière \\> (.) \<\/h2\>. Cela correspond à tous les jeu de balises et le transmettre au bloc suivant. Cela se fera pour chaque ligne qui correspond. Met le Match groupe de capture: à 1 $. Cela enverra simplement le texte à l'intérieur des balises au (x) nettoyeur (s) à l'intérieur du bloc et remettra les résultats entre les balises d'en-tête. C'est beaucoup de travail rendu facile! N'oubliez pas de définir les options pour ignorer la casse.

Ensuite, prenez un Titre Title with Options bloquer et faites-le glisser vers le milieu entre le Si le texte correspond bloc et le fin conditionnelle bloc. Étant donné que la liste par défaut de création de petite taille est identique à celle de l'application Web, vous ne devez rien ajouter. Mieux encore, il est assez intelligent pour s’assurer que le premier mot est toujours en majuscule, peu importe le mot. Si un autre mot doit être en minuscule, vous pouvez l'ajouter à la grande zone de texte sous Par défaut: a,… . Si vous souhaitez que certains acronymes ne soient pas modifiés, vous pouvez les placer dans la deuxième grande zone de texte, sous Par défaut: AT & T… . J'ai ajouté HTML CSS PHP parce que ceux-ci devraient toujours être complètement en majuscule.

le Traiter: vs vs v v. Comme de petits mots doit être vérifié.


Résumé

Vous avez maintenant un nettoyeur TextSoap qui convertira tout texte Markdown en HTML pouvant être collé directement dans WordPress pour publication. Plus aucun ajustement nécessaire. Il est maintenant assez facile de ne travailler que dans Markdown et de le coller dans WordPress juste pour publier.

Par exemple, j'ai écrit cet article dans Sublime Text à l'aide de Markdown, copié le texte dans le Presse-papiers, utilisé mon flux de travail TextSoap Alfred pour exécuter ce programme de nettoyage afin de convertir le Markdown en HTML dans le Presse-papiers, collé les résultats dans WordPress et téléchargé mes images. C'est aussi simple!

Un mot d'avertissement: collez votre code HTML dans le Texte onglet de l'éditeur WordPress!

Avez-vous créé des nettoyants TextSoap uniques? Faites-moi savoir dans les commentaires!