Ce que vous allez créerLe Mac a de nombreuses applications minimalistes: des programmes qui présentent le nombre minimal d’options possibles tout en conservant les fonctionnalités. Il y a beaucoup d'éditeurs de texte minimalistes. FoldingText se distingue comme différent.
Dans ce tutoriel, je vais vous présenter le FoldingText éditeur et vous montrer comment l’étendre avec:
Non seulement FoldingText minimaliste dans la conception, mais aussi dans le format de fichier: il utilise uniquement des fichiers texte brut. Tout le formatage est fait avec Réduction avec une torsion: Vous pouvez marquer n'importe quelle zone comme ayant une mise en forme et des fonctionnalités spéciales en ajoutant une extension à la fin d'une ligne d'en-tête.
Fenêtre et menus FoldingText Quand vous lancez FoldingText, vous êtes présenté avec une fenêtre simple. Cette interface graphique propre et minimale aide à se concentrer sur l'écriture et non sur le programme.
Certains Markdown Comme vous tapez Réduction commandes de formatage, le texte est mis en surbrillance et des éléments supplémentaires, tels que les adresses d’un lien, sont masqués. Dans l'exemple ci-dessus, vous pouvez voir le Réduction pour une ancre alors que le curseur est encore dessus.
Cacher la balise d'ancrage Lorsque vous passez à une nouvelle ligne ou que vous ajoutez un autre personnage, FoldingText masque les détails de l'adresse pour que vous ne voyiez que le titre.
Texte pliant Maintenant, éditez le Réduction texte pour être un en-tête et cliquez sur le # symbole à côté introduction. Cela plie rapidement le texte dans cette section jusqu'à l'en-tête suivant. Le symbole de texte plié est affiché dans le coin supérieur gauche. En outre, il ajoute un … (un ellipsis) à la fin de la section pliée. En cliquant soit sur le symbole triangulaire en haut à gauche, soit sur le bouton … à la fin de la section pliée déplieront ce texte.
Extensions Todo et Timer La véritable innovation trouvée dans FoldingText est les extensions. FoldingText vient avec deux extensions pré-construites dans: faire, et minuteur.
le faire extension vous donne une liste de tâches multi-niveaux avec des cases à cocher.
le minuteur L'extension vous donne des minuteries pour vous alerter. Les minuteries fonctionnent comme des minuteurs. Si vous faites une liste avec des temps sur les lignes, il décomptera le temps le plus élevé, vous enverra un message et démarrera à la prochaine fois. Vous pouvez créer autant de zones d'extension dans un document que nécessaire.
Comme vous pouvez le voir dans l'exemple de liste de tâches, vous pouvez baliser n'importe quelle ligne de FoldingText. La syntaxe de la balise est @ et du texte. FoldingText utilise des balises pour un formatage spécial (par exemple: la croix sur le @terminé étiquette).
Les commandes FoldingText a une palette de commandes, similaire à celle rendue populaire avec Texte sublime. Lorsque vous appuyez sur Command-Citation, une liste de toutes les commandes disponibles apparaîtra. Il n’a pas beaucoup de commandes intégrées, je vais donc vous montrer comment en ajouter..
Pour commencer un brancher, vous commencez avec le Gestionnaire de plugins.
Ouverture du gestionnaire de plug-ins Du FoldingText Menu principal, sélectionnez Gestionnaire de plugins.
Gestionnaire de plugins Le panneau de gauche affiche une liste de chaque plug-in installé. En cliquant sur l'un d'eux, sa description est affichée dans le panneau de droite. Toutes ces extensions sont téléchargeables à partir de FoldingTextle site de en cliquant sur le Trouver des plug-ins bouton.
Pour créer un plug-in, accédez au répertoire du plug-in en sélectionnant Ouvrir le dossier des plug-ins bouton en bas à droite.
Dossier des plug-ins Cela ouvre Chercheur dans le répertoire qui contient tous les plug-ins. Créez un répertoire appelé MySnippets.ftplugin. Dans ce répertoire, créez les fichiers main.js et package.json. Ce sont les fichiers minimum nécessaires pour un plug-in.
FoldingText les extensions sont codées avec JavaScript. le package.json fichier donne FoldingText informations à afficher dans le Gestionnaire de plugins.
dans le package.json fichier, placez ce qui suit:
"name": "MySnippets", "version": "1.0.0", "description": "Ajoute mes propres extraits, commandes et raccourcis clavier à Folding Text.", "homepage": "", "moteurs" : "foldtext": "> 2.0.0", "taskpaper": "> 3.0.0"
Cela raconte FoldingText à propos du plug-in prénom, version, la description, page d'accueil de l'auteur, et quelles versions de FoldingText ou TaskPaper utiliser. Seulement FoldingText 2.0.0 ou TaskPaper 3.0.0 et versions ultérieures.
Pour ajouter des extraits à FoldingText, ajouter les lignes suivantes au main.js fichier:
Accentsconagua
Share// // MySnippets et diverses extensions de FoldingText. // define (function (require, exports, module) // // Obtenir une référence à des extensions. // var Extensions = require ('ft / core / extensions'). Extensions; // // utilisez addSnippet pour créer mon extraits différents. // Extensions.addSnippet ('; tut': '## Due: \ nFoldable \ n \ n ## Teaser \ n \ n \ n \ n ## Nom du didacticiel \ n \ n \ n \ n # n ## Conclusion \ n \ n \ n \ n ## Choses à faire.todo \ n- Écrire l'article \ n- La preuve lire l'article \ n- Soumettre l'article \ n ','; code ': function () return '## Code \ n \ n ## Code de fin \ n \ n';);); Tous les fichiers d’extensions commencent par le définir() une fonction. Cette fonction prend une fonction qui, lorsqu'elle est appelée, accepte trois objets: exiger, exportations, et module. le exiger objet vous permet d'acquérir n'importe quelle bibliothèque comme le Les extensions bibliothèque pour ajouter des choses à FoldingText.
Pour créer des extraits, utilisez le addSnippet fonction de Les extensions. Il attend un tableau json clé-valeur. La clé sera le texte de développement et la valeur sera évaluée en texte pour remplacer la clé. Le côté de l’expansion peut être du texte ou une fonction.
J'ai défini deux extraits ici: ; tut et ;code. Lorsque vous tapez un texte suivi d'un onglet, le texte est développé en conséquence. le ; tut extrait me donne une mise en page minimale tutoriel. le ;code extrait me donne un bloc de code pliable afin que je puisse ranger le code avant d'obtenir le nombre de mots de mon tutoriel.
Pour ajouter des raccourcis clavier, vous devez utiliser un crochet pour démarrer le moteur d’éditeur. Juste après le code pour les extraits, ajoutez ce code:
// // Crée une fonction pour le chargement de l'éditeur pour charger des informations de débogage spéciales // et des mappages de clavier. // Extensions.addInit (fonction (éditeur) // // ajoute des KeyMappings personnalisés // editor.addKeyMap ('Alt-C': 'formatCodeblock');, Extensions.PriorityLast); le Extensions.addInit () function ajoute la fonction au processus d'initialisation de l'éditeur. le éditeur objet sera passé à la fonction. En utilisant le editor.addKeyMap () fonction, un raccourci clavier est facilement ajouté à l'éditeur.
Cette fonction attend une liste de valeurs-clés JSON avec la touche comme raccourci clavier et la valeur le nom de la fonction à exécuter. Comme j'utilise souvent des blocs de code, j'ai créé un raccourci pour cela..
Si vous êtes bon à JavaScript la programmation, la création de vos propres commandes sont faciles. Toute commande effectuée sera disponible dans la palette de commandes. Je travaille avec de nombreuses listes de tâches et déplace souvent des objets dans les deux sens. Vous pouvez automatiser cela avec le code suivant:
// // Ensuite, ajoutez des commandes pour FoldingText. // Extensions.addCommand (name: 'moveTDNext', description: 'Déplace le noeud Todo actuel vers la liste Todo suivante.', PerformCommand: function (éditeur) var cnode = editor.selectedRange (). StartNode, pnode = cnode .previousBranch (), snode; // // Aller au premier en-tête de la liste de tâches en cours. // while (pnode.type ()! = 'rubrique') pnode = pnode.previousBranch (); // // / Allez à la branche suivante qui est une liste de tâches et assurez-vous // que vous vous trouvez au sommet. // snode = pnode.nextBranch (); while (snode.type ()! = "Rubrique") snode = snode. nextBranch (); // // l'ajouter à ce point. // snode.appendChild (cnode);); Extensions.addCommand (name: 'moveTDPrevious', description: 'Déplace le noeud Todo actuel vers la liste Todo précédente.', PerformCommand: function (éditeur) var cnode = editor.selectedRange (). StartNode, pnode = cnode.previousBranch (), snode; // // Aller en haut de la liste de tâches en cours. // while (pnode.type ()! = = rubrique ') pnode = pnode.previousBranch (); // // Aller à la liste précédente et assurez-vous qu'il est en haut. // snode = pnode.previousBranch (); while (snode.type ()! = "rubrique") snode = snode.previousBranch (); // // Ajout à cette branche. // snode.appendChild (cnode););
le Extensions.addCommand () fonction est utilisée pour créer une nouvelle commande. Dans cet exemple de code, les commandes sont les suivantes: moveTDNext, et moveTDPrevious. moveTDNext déplace l'élément de tâche en cours sur lequel se trouve le curseur sur la liste de tâches suivante. moveTDPrevious fait exactement le contraire.
le Extensions.addCommand () prend une liste json avec trois éléments: prénom, la description, et performCommand. le prénom item est une chaîne donnant un nom à la commande sans espaces. le la description est une chaîne décrivant ce que fait la commande. Cette description sera affichée dans la palette de commandes. le performCommand est une fonction qui accepte un éditeur exemple et ne retourne rien.
Menu d'aide Dans ces fonctions, j'utilise l'éditeur API pour passer à l'en-tête de la liste de tâches en cours, à la liste suivante ou précédente et ajouter l'élément à cette liste. L'API est trop volumineuse pour être décrite pour ce tutoriel. Tous les documents de l’API sont accessibles depuis le Aide> Kit de développement logiciel menu.
Kit de développement logiciel le Documentation link ouvrira la documentation HTML dans le navigateur Web par défaut. le Run Editor le lien va commencer FoldingText instance avec le débogueur de code activé. le Run Specs link exécutera toutes les spécifications sur FoldingText et chacune de ses extensions.
Dans FoldingText terminologie, un scénario utilise AppleScript injecter un JavaScript fonctionner en FoldingText effectuer une action. FoldingText ajoute deux mots-clés dans c'est AppleScript dictionnaire: évaluer et déboguer. Tous les deux évaluer et déboguer prendre un JavaScript et les paramètres pour l'entrée, mais évaluer l'exécute et renvoie le résultat en déboguer lance le script dans la fenêtre du débogueur.
Un bon exemple serait d’obtenir une liste de balises à partir de la fenêtre la plus en haut. Ouvrez le Éditeur AppleScript avec ce code:
Indiquez à l'application "FoldingText" que lstDocs est défini sur documents si lstDocs ≠ , puis indique à l'élément 1 de lstDocs return (script d'évaluation "function (éditeur) retour editor.tree (). tags (true) .sort ();") fin dire fin si fin dire
Cela raconte le premier FoldingText document pour évaluer un JavaScript fonction qui accepte une instance de l'éditeur. La fonction obtient les balises de FoldingText éditeur objet et les retourne triés.
Script pour obtenir des tags Lorsque ce script est exécuté, le résultat correspond aux balises du document actuel. Ici le document actuel a les balises terminé et suivant. J'utilise ce script avec d'autres dans un flux de travail Alfred. Vous pouvez obtenir le flux de travail à partir du téléchargement de cet article..
Une extension pour FoldingText ajoute de nouvelles fonctionnalités à l'éditeur. Un bloc mathématique permettant d'effectuer des calculs serait vraiment agréable d'avoir.
Créez une nouvelle extension appelée imath.ftplugin. Dans le fichier package.json, ajoutez les éléments suivants:
"name": "Mode iMath", "version": "1.0.0", "description": "Ajoute le mode 'imath'", "page d'accueil": "https://customct.com", "moteurs": "foldtext": "> 2.0.0"
Cela donne toutes les informations nécessaires pour décrire l'extension.
Pour faire les calculs, le framework Math.js est excellent. Téléchargez cette bibliothèque et placez-la dans le répertoire avec le main.js fichier.
dans le main.js fichier, ajoutez ce code:
// // Fichier: main.js // // Description: Ce fichier définit le mode mathématique de FoldingText. Il traite les lignes mathématiques à l'aide de la bibliothèque mathjs. // define (function (require, exports, module) 'use strict'; // // Charge les bibliothèques que je dois utiliser. // var Extensions = require ('ft / core / extensions'). Extensions; var math = require ("./ mathjs.js"); // // Ajoute l'extension de mode "math" au système. // Extensions.addMode (name: 'imath');); Cette extension commence comme l’extension snippets. Après avoir obtenu une référence à la Les extensions bibliothèque, exiger est utilisé pour charger le math.js bibliothèque du dossier extensions. Pour charger des bibliothèques locales, exiger utilise un chemin relatif vers le nom complet du fichier de bibliothèque.
Suivant, Extensions.addMode () fonction est utilisée pour ajouter un nouveau mode avec le nom imath. Cette fonction accepte une liste JSON avec la clé prénom définir le nom de la nouvelle extension: imath. Cela permet de définir un bloc de texte contenant des éléments mathématiques pour la imath extension à évaluer.
Certaines fonctions d'assistance sont nécessaires. Ajoutez ce code après le Extensions.addMode () une fonction:
// // Fonction: inMathArea // // Description: cette fonction détermine si le nœud actuel est // dans une zone mathématique et s'il n'est pas vide. // fonction inMathArea (node) if ((node.modeContext () === 'imath') && (node.text (). trim ()! = ")) return (true); else return (false); ; // // Fonction: Calculer // // Description: Cette fonction récupère le nœud actuel et le contenu de la chaîne // du nœud actuel. Il retourne le résultat du calcul. // fonction Calculate (str) var result = 0, scope = ; try // // Utilisez la bibliothèque Mathjs pour évaluer l'équation. // var lines = str.substr (0, str.length - 2) .split ("\ n"); lines.forEach (function (line) noeud var, code; code = mathjs.compile (ligne); resultat = code.eval (portée);); catch (e) // // Mathjs avait un problème avec les expressions. Retourner un? // résultat = "?" + "-" + e.toString (); return (result); ; La fonction inMathArea () prend un noeud et détermine si ce noeud est dans une zone de texte mathématique en appelant node.modeContext (). Puisque le traitement des lignes vierges ne donne rien, il vérifie également cette condition.
le Calculer() la fonction appellera le Math.js bibliothèque pour évaluer la chaîne donnée. Si la bibliothèque lève une exception, elle renvoie un point d'interrogation. La chaîne à évaluer sera la ligne entière à l'exception des deux derniers caractères.
La dernière chose à faire est de se connecter à la routine appelée chaque fois que l'utilisateur modifie le texte. Ajoutez ces lignes de code après la Calculer() une fonction:?
// // Fonction: ProcessPreviousNodes // // Description: Cette fonction recherche les lignes imath précédentes // qui ne sont pas masquées. Les lignes cachées sont ignorées, mais les lignes visibles sont traitées pour un calcul correct. // fonction ProcessPreviousNodes (noeud) var pnode = noeud, texte = "", résultat = ""; while (pnode && (! pnode.mode ()) && (pnode.modeContext () === 'imath')) // Ce n'est pas un titre, voyez s'il a une commande d'évaluation. // text = pnode.text (); if (text.search ("=>") < 0) // // No evaluation, add it to the rest. // result = text + "\n" + result; pnode = pnode.previousBranch(); return (result); // // Function: ProcessMathNode // // Description: This function is used to process a node in the math // context. It expects the node to be passed to it. // function ProcessMathNode(node) // // Calculate if needed. Get the text of the line. // var result = node.text(); // // See if it ends in "=>".Si oui, traitez la ligne. // if (result.substr (-2) ==" => ") // Voir si certaines des lignes précédentes avaient // des déclarations de variables. // result = ProcessPreviousNodes (noeud) + "\ n" + résultat; // // Voir si d'autres zones ont des définitions de variable. // var pnode = node.parent.previousBranch (); while (pnode) if (pnode.modeContext () == = 'imath') if (! editor.nodeIsHiddenInFold (pnode) &&! editor.isCollapsed (pnode)) result = ProcessPreviousNodes (pnode.lastChild) + "\ n" + résultat; pnode = pnode.previousBranch () ; // // Calculez le résultat. Si Calculate renvoie un tableau, il y avait // variables également incluses. Obtenez juste le résultat final. // var cresult = Calculate (résultat); if (isArray (cresult)) // // nous obtiendrons plus que la réponse précédente // par conséquent, récupérons simplement le dernier résultat // cresult = cresult [cresult.length - 1]; // // Associe le résultat à la ligne d'origine. // resultat = node.text () + "" + cresult; // // Met à jour la ligne. // node.setText (result); // // Ajoute un TreeChan Gestionnaire d'événements ged pour déterminer quand exécuter // un calcul. // Extensions.addTreeChanged (fonction (éditeur, e) var deltas = e.deltas; pour (var i = 0; i < deltas.length; i++) var updatedNode = deltas[i].updatedNode, insertedNodes = deltas[i].insertedNodes, length = 0; // // Check all the inserted nodes. // length = insertedNodes.length; for (var j = 0; j < length; j++) var each = insertedNodes[j]; if (inMathArea(each)) // // It's a math node. Process it. // ProcessMathNode(each); // // Check the updated Nodes. // if (updatedNode) // // It is an updated Node. Make sure it is in the math area. // if (inMathArea(updatedNode)) // // It's a math node. Process it. // ProcessMathNode(updatedNode); ); le Extensions.addTreeChanged () la fonction est utilisée pour se connecter aux routines de changement de texte. FoldingText conserve une arborescence de chaque ligne de texte du document. Lorsque la structure arborescente est modifiée, chaque fonction enregistrée sera appelée avec l'instance de l'éditeur et une structure de deltas..
La fonction parcourt chaque delta de mise à jour et chaque ajout pour déterminer si elle se trouve dans le imath zone utilisant le inMathArea () une fonction. Si tel est le cas et que les deux derniers caractères de la ligne sont =>, puis le ProcessMathNode () la fonction est appelée. le ProcessMathNode () function appelle quelques fonctions d’aide pour remonter dans le document afin d’obtenir les informations pertinentes. imath sections.
Si une section est masquée, elle est ignorée. De cette façon, différents scénarios peuvent être utilisés et évalués. Une fois tous pertinents imath sections sont traitées, le tout est donné à Calculer() évaluer les résultats. Les résultats sont ajoutés à la fin de la ligne avec un espacement approprié et renvoyés dans l'arbre. L’extension mathématique ne calculera que juste après que l’utilisateur ait saisi =>.
Test de l'extension iMathUne fois le fichier sauvegardé, vous devrez recharger FoldingText. Essayez les lignes ci-dessus et voyez les résultats. Rappelez-vous: pour réévaluer une expression, vous devez supprimer les résultats précédents. Le nouveau résultat sera calculé et retourné au document.
FoldingText fait usage de Less.js styliser son interface utilisateur. FoldingText est vraiment un navigateur Web sans toute l'interface utilisateur du navigateur Web.
Il y a deux façons de changer comment FoldingText regarde: ajouter Less.js déclarations à la user.less fichier qui se trouve un répertoire à partir du répertoire Plug-Ins, ou ajoutez-le à un fichier. style.less fichier dans n'importe quel dossier de plugin.
Par exemple, ouvrez le Finder dans le dossier Plug-Ins et accédez à un répertoire. Là, ouvrez le user.less fichier. Tu verras:
// Ceci est votre user.less. Utilisez-le pour remplacer le style par défaut. Lorsque ce fichier // est créé pour la première fois, toutes les lignes sont commentées (commençant par //) et // n'a donc aucun effet sur le style de l'éditeur. // Pour changer la police, décommentez la ligne suivante: // @ fontFamily: Menlo; // Pour changer la taille de la police, décommentez la ligne suivante: // @ fontSize: 10pt; // Pour changer la couleur de base "ink" (utilisée pour le texte), décommentez la ligne // suivante: // @ inkColor: black; // Pour changer la couleur de base "papier" (derrière le texte), décommentez la // ligne suivante: // @ paperColor: white; // Couleur utilisée pour indiquer quelque chose. Comme lorsque la souris survole un lien. // @ shownColor: blue;
Voici quelques-uns des paramètres par défaut que vous pouvez modifier. Je préfère le texte plus volumineux, alors supprimez l'indicateur de commentaires pour le @taille de police variable et réglez-le sur 12 pt. Quand vous sauvegardez et rechargez FoldingText, tout le texte sera basé à 12 pt Taille.
Si vous souhaitez modifier quelque chose qui ne figure pas dans le fichier, ouvrez le Débogueur pour naviguer dans le DOM. Trouvez ce que vous voulez, obtenez son identifiant et changez-le dans le Less.js fichier.
Lors de la création de toutes ces extensions, vous devrez déboguer votre code ou parcourir le DOM pour trouver ce que vous devez changer.. FoldingText rend cela vraiment facile.
Le débogueur Lorsque vous sélectionnez le Run Editor lien sur le Kit de développement logiciel, vous obtenez le FoldingText Éditeur avec des contrôles pour le débogage. Sélection du Inspecteur dans la barre d'outils montre le standard Safari outils de développement. Cela vous donne tous les outils dont vous aurez besoin pour déboguer quoi que ce soit dans FoldingText. Tu peux vérifier Guide du développeur Apple Safari pour plus d'informations sur l'utilisation des outils de développement.
Dans ce tutoriel, je vous ai montré comment créer des extraits, des raccourcis clavier, des commandes, des scripts, des extensions et des thèmes pour FoldingText. Étant donné que tout est basé sur la technologie du navigateur Web, la courbe d'apprentissage est simple. Avec toute la richesse de JavaScript bibliothèques disponibles, il n’ya pratiquement aucune limite à ce que vous pouvez faire avec FoldingText.
