Share
Wat je gaat creërenDe Mac heeft veel applicaties die minimalistisch zijn: programma's die het minimale aantal mogelijke opties bieden, terwijl ze nog steeds de functionaliteit behouden. Er zijn veel minimalistische teksteditors. FoldingText valt op als anders.
In deze tutorial zal ik je voorstellen aan de FoldingText editor en laat je zien hoe je het kunt uitbreiden met:
Dat is niet alleen het geval FoldingText minimalistisch in ontwerp, maar ook in bestandsformaat: het maakt alleen gebruik van platte tekstbestanden. Alle opmaak is klaar met Markdown met een twist: u kunt elk gebied markeren met een speciale opmaak en functionaliteit door een extensie aan het einde van een kopregel toe te voegen.
FoldingText-venster en menu's Wanneer je start FoldingText, je krijgt een gewoon venster te zien. Deze schone, minimale grafische interface helpt je te focussen op het schrijven en niet op het programma.
Een paar markdown Terwijl je typt Markdown formatteringscommando's, de tekst is gemarkeerd en extra dingen, zoals adressen in een link, zijn verborgen. In het bovenstaande voorbeeld ziet u de Markdown voor een anker terwijl de cursor er nog op staat.
De ankertag verbergen Wanneer u naar een nieuwe regel gaat of een ander teken toevoegt, FoldingText verbergt de adresgegevens zodat u alleen de titel ziet.
Tekst vouwen Bewerk nu de Markdown tekst als een koptekst en klik op de # symbool naast Invoering. Hierdoor wordt de tekst in dat gedeelte snel naar de volgende kopregel gevouwen. Het symbool met de gevouwen tekst wordt in de linkerbovenhoek weergegeven. Ook wordt er een toegevoegd ... (een ellips) tot het einde van de gevouwen sectie. Klikken op het driehoekige symbool in de linkerbovenhoek of de ... aan het einde van het gevouwen gedeelte zal die tekst worden opengevouwen.
Todo en timer uitbreidingen De echte innovatie in FoldingText is de extensie. FoldingText wordt geleverd met twee vooraf ingebouwde uitbreidingen: Te doen, en timer.
De Te doen extensie geeft je een multi-level takenlijst met selectievakjes.
De timer extensie geeft u timers om u te waarschuwen. De timers werken als afteltimers. Als u een lijst maakt met tijden op de regels, telt deze de hoogste tijd af, stuurt u een bericht en begint u de volgende keer. U kunt zoveel extensiegebieden in één document maken als u nodig hebt.
Zoals je kunt zien in het voorbeeld van de todolijst, kun je elke regel markeren FoldingText. De tag-syntaxis is @ en wat tekst. FoldingText gebruikt enkele tags voor speciale opmaak (di: de cross-out op de @gedaan label).
commando's FoldingText heeft een opdrachtenpalet, vergelijkbaar met dat populair bij Sublieme tekst. Wanneer u op drukt Command-Quote, er verschijnt een lijst met alle beschikbare commando's. Er zijn niet zoveel commando's ingebouwd, dus ik zal je laten zien hoe je wat toevoegt.
Om te beginnen met inpluggen, je begint met de Plugin manager.
De Plug-in Manager openen Van de FoldingText Hoofdmenu, selecteer Plugin manager.
Plugin manager Het linkerpaneel toont een lijst van elke geïnstalleerde plug-in. Door er op te klikken, wordt de beschrijving in het rechterpaneel getoond. Al deze extensies kunnen worden gedownload van FoldingTextwebsite door op de. te klikken Zoek plug-ins knop.
Als u een plug-in wilt maken, gaat u naar de invoegmap door de. Te selecteren Open map met invoegtoepassingen knop rechtsonder.
Map met invoegtoepassingen Dit wordt geopend vinder in de map die alle plug-ins bevat. Maak een map met de naam MySnippets.ftplugin. Maak de bestanden in die map main.js en package.json. Dit zijn de minimale bestanden die nodig zijn voor een plug-in.
FoldingText extensies zijn gecodeerd met JavaScript. De package.json bestand geeft FoldingText informatie om weer te geven in de Plugin manager.
In de package.json bestand, plaats het volgende:
"name": "MySnippets", "version": "1.0.0", "description": "Voegt mijn eigen fragmenten, opdrachten en sneltoetsen toe aan vouwtekst.", "startpagina": "", "engines" : "foldingtext": "> 2.0.0", "taskpaper": "> 3.0.0"
Dit vertelt FoldingText over de plug-ins naam, versie, Omschrijving, Startpagina van de auteur, en welke versies van FoldingText of TaskPaper gebruiken. Enkel en alleen FoldingText 2.0.0 of TaskPaper 3.0.0 en meer plug-ins voor ondersteuning.
Fragmenten toevoegen aan FoldingText, voeg de volgende regels toe aan de main.js het dossier:
Accentsconagua
// // MySnippets en verschillende uitbreidingen van FoldingText. // define (function (require, exports, module) // // Krijg een verwijzing naar Extensions. // var Extensions = require ('ft / core / extensions'). Extensions; // // Gebruik addSnippet om mijn te maken verschillende snippets. // Extensions.addSnippet ('; tut': '## Due: \ nFoldable \ n \ n ## Teaser \ n \ n \ n \ n ## Tutorial Name \ n \ n \ n \ n # ## Conclusie \ n \ n \ n \ n ## Things To Do.todo \ n- Schrijf het artikel \ n- Bewijs lees het artikel \ n- Dien het artikel in \ n ','; code ': function () return '## Code \ n \ n ## End Code \ n \ n';);); Alle extensiebestanden beginnen met de bepalen() functie. Die functie neemt een functie die bij het oproepen drie objecten accepteert: vereisen, export, en module. De vereisen object stelt u in staat om elke bibliotheek zoals de te verwerven uitbreidingen bibliotheek om dingen aan toe te voegen FoldingText.
Gebruik de. Om fragmenten te maken addSnippet functie van uitbreidingen. Het verwacht een json key-value array. De sleutel is de uitbreidingstekst en de waarde wordt geëvalueerd naar tekst om de sleutel te vervangen. De uitbreidingszijde kan tekst of een functie zijn.
Ik heb hier twee fragmenten gedefinieerd: ; tut en ;code. Wanneer u tekst invoert gevolgd door een tabblad, wordt de tekst dienovereenkomstig uitgebreid. De ; tut snippet geeft me een minimale lay-out voor de tutorial. De ;code snippet geeft me een vouwbaar codeblok, zodat ik de code kan wegstoppen voordat ik een woordentelling krijg van mijn zelfstudie.
Om sneltoetsen toe te voegen, gebruikt u een haak om de editor-engine te starten. Voeg deze code toe net na de code voor fragmenten:
// // Maak een functie voor wanneer de editor is geladen om speciale foutopsporingsinformatie // en toetsenbordtoewijzingen te laden. // Extensions.addInit (functie (editor) // // Aangepaste KeyMappings // editor.addKeyMap ('Alt-C': 'formatCodeblock');, Extensions.PriorityLast); De Extensions.addInit () functie voegt de functie toe aan het initialisatieproces voor de editor. De editor object wordt doorgegeven aan de functie. De ... gebruiken editor.addKeyMap () functie, kan een sneltoets eenvoudig aan de editor worden toegevoegd.
Deze functie verwacht een json sleutel-waarde lijst met de sleutel als de sneltoets en de waarde is de naam van de uit te voeren functie. Omdat ik vaak codeblokken gebruik, heb ik er een snelkoppeling voor gemaakt.
Als je goed in bent JavaScript programmeren, het maken van je eigen commando's is eenvoudig. Elke gemaakte opdracht is beschikbaar in het opdrachtenpalet. Ik werk met veel todolijsten en verplaats vaak items heen en weer. U kunt dat automatiseren met de volgende code:
// // Voeg vervolgens opdrachten toe voor FoldingText. // Extensions.addCommand (name: 'moveTDNext', description: 'Verplaats het huidige Todo-knooppunt naar de volgende Todolijst.', PerformCommand: function (editor) var cnode = editor.selectedRange (). StartNode, pnode = cnode .previousBranch (), snode; // // Ga naar de bovenste kop van de huidige takenlijst. // while (pnode.type ()! = 'heading') pnode = pnode.previousBranch (); // / / Ga naar de volgende tak die een takenlijst is en maak // zeker dat je bovenaan staat. // snode = pnode.nextBranch (); while (snode.type ()! = "Heading") snode = snode. nextBranch (); // // Voeg het toe tot dit punt. // snode.appendChild (cnode);); Extensions.addCommand (name: 'moveTDPrevious', description: 'Verplaats het huidige Todo-knooppunt naar de vorige Todo-lijst.', PerformCommand: function (editor) var cnode = editor.selectedRange (). StartNode, pnode = cnode.previousBranch (), snode; // // Ga naar de top van de huidige takenlijst. // while (pnode.type ()! = 'heading') pnode = pnode.previousBranch (); // // Ga naar de vorige lijst en zorg ervoor dat het bovenaan staat. // snode = pnode.previousBranch (); while (snode.type ()! = "heading") snode = snode.previousBranch (); // // Toevoegen aan die tak. // snode.appendChild (cnode););
De Extensions.addCommand () functie wordt gebruikt om een nieuw commando te creëren. In dit codevoorbeeld zijn de opdrachten: moveTDNext, en moveTDPrevious. moveTDNext verplaatst het huidige actiepostitem naar de volgende takenlijst. moveTDPrevious doet precies het tegenovergestelde.
De Extensions.addCommand () neemt een json-lijst met drie elementen: naam, Omschrijving, en performCommand. De naam item is een string die een naam geeft aan de opdracht zonder spaties. De Omschrijving is een string die beschrijft wat de opdracht doet. Deze beschrijving wordt weergegeven in het opdrachtenpalet. De performCommand is een functie die een accepteert editor bijvoorbeeld en retourneer niets.
Help Menu In deze functies gebruik ik de editor-API om naar de kop van de huidige takenlijst te gaan, naar de volgende of vorige lijst te gaan en het item aan die lijst toe te voegen. De API is te groot om te beschrijven voor deze zelfstudie. Alle API-documenten zijn toegankelijk via de Help> Software Development Kit menu.
Software ontwikkelingspakket De Documentatie link opent de HTML-documentatie in de standaardwebbrowser. De Run Editor link begint FoldingText bijvoorbeeld met de code debugger ingeschakeld. De Voer specificaties uit link zal alle specificaties uitvoeren op FoldingText en elk van zijn extensies.
In FoldingText terminologie, a script gebruikt AppleScript injecteren van een JavaScript functie in FoldingText om een actie uit te voeren. FoldingText voegt er twee sleutelwoorden aan toe AppleScript woordenboek: schatten en debug. Beide schatten en debug neem een JavaScript en parameters voor invoer, maar schatten draait het en geeft het resultaat terug terwijl debug lanceert het script in het debuger-venster.
Een goed voorbeeld is het verkrijgen van een lijst met tags van het bovenste venster. Open de AppleScript Editor met deze code:
vertel applicatie "FoldingText" zet lstDocs op documenten als lstDocs ≠ en vertel item 1 van lstDocs return (evalueer script "functie (editor) return editor.tree (). tags (true) .sort ();") einde vertel het einde als einde vertel
Dit vertelt de eerste FoldingText document om te evalueren a JavaScript functie die een editorinstantie accepteert. De functie haalt de tags vandaan FoldingText editor object en retourneert ze gesorteerd.
Script voor het verkrijgen van tags Wanneer dit script wordt uitgevoerd, is het resultaat de tags in het huidige document. Hier heeft het huidige document de tags gedaan en volgende. Ik gebruik dit script samen met anderen in een Alfred-workflow. U kunt de werkstroom van de download voor dit artikel ophalen.
Een extensie voor FoldingText voegt nieuwe functionaliteit toe aan de editor. Een wiskundig blok dat het mogelijk maakt om wat berekeningen te maken zou heel leuk zijn om te hebben.
Maak een nieuwe extensie met de naam imath.ftplugin. Voeg in het bestand package.json het volgende toe:
"name": "iMath Mode", "version": "1.0.0", "description": "Adds 'imath' mode", "homepage": "https://customct.com", "engines": "foldingtext": "> 2.0.0"
Dit geeft alle informatie die nodig is om de extensie te beschrijven.
Voor het maken van de eigenlijke wiskunde is het Math.js-framework geweldig. Download die bibliotheek en plaats deze in de map met de main.js het dossier.
In de main.js bestand, voeg deze code toe:
// // Bestand: main.js // // Beschrijving: dit bestand definieert de wiskundemodus voor FoldingText. It // verwerkt de wiskundige regels met behulp van de mathjs-bibliotheek. // define (function (require, exports, module) 'gebruik strict'; // // Laad de bibliotheken die ik moet gebruiken // var Extensions = require ('ft / core / extensions'). Extensions; var math = require ("./ mathjs.js"); // // Voeg de 'math'-modus toe aan het systeem // Extensions.addMode (name:' imath ');); Deze extensie start net als de extensie voor fragmenten. Na een verwijzing naar de uitbreidingen bibliotheek, vereisen wordt gebruikt om de math.js bibliotheek uit de map extensies. Om lokale bibliotheken te laden, vereisen gebruikt een relatief pad naar de volledige naam van het bibliotheekbestand.
volgende, Extensions.addMode () functie wordt gebruikt om een nieuwe modus met de naam toe te voegen imath. Deze functie accepteert een joneslijst met de sleutel naam stel in op de naam van de nieuwe extensie: imath. Hiermee kan een tekstblok worden gedefinieerd dat wiskunde bevat voor de imath uitbreiding om te evalueren.
Sommige hulpfuncties zijn nodig. Voeg deze code toe na de Extensions.addMode () functie:
// // Functie: inMathArea // // Beschrijving: deze functie bepaalt of het huidige knooppunt // een wiskundegebied is en niet leeg is. // function inMathArea (node) if ((node.modeContext () === 'imath') && (node.text (). trim ()! = "")) return (true); else return (false); ; // // Functie: Berekenen // // Beschrijving: deze functie haalt het huidige knooppunt en de // string-inhoud van het huidige knooppunt. Het geeft het resultaat van de berekening terug. // function Calculate (str) var result = 0, scope = ; probeer // // Gebruik de Mathjs-bibliotheek om de vergelijking te evalueren. // var lines = str.substr (0, str.length - 2) .split ("\ n"); lines.forEach (function (line) var node, code; code = mathjs.compile (line); result = code.eval (scope);); catch (e) // // Mathjs had een probleem met de expressies. Keer terug een? // result = "?" + "-" + e.toString (); return (resultaat); ; De functie inMathArea () neemt een knooppunt en bepaalt of dat knooppunt zich in een wiskundetekstgebied bevindt door te bellen node.modeContext (). Omdat het verwerken van lege regels niets oplevert, controleert het ook op die voorwaarde.
De Berekenen() functie zal de Math.js bibliotheek om de gegeven reeks te evalueren. Als de bibliotheek een uitzondering genereert, wordt een vraagteken weergegeven. De te evalueren reeks is de hele regel, behalve de laatste twee tekens.
Het laatste wat u moet doen, is de routine in te schakelen die wordt aangeroepen wanneer de gebruiker de tekst wijzigt. Voeg deze regels code toe na de Berekenen() functie:?
// // Functie: ProcessPreviousNodes // // Beschrijving: deze functie scant naar eerdere imath-regels die // niet zijn verborgen. Verborgen lijnen worden genegeerd, maar // zichtbare lijnen worden verwerkt voor de juiste berekening. // function ProcessPreviousNodes (knooppunt) var pnode = node, text = "", result = ""; while (pnode && (! pnode.mode ()) && (pnode.modeContext () === 'imath')) // // Geen kop, kijk of deze een evaluatieopdracht heeft. // 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 "=>Als dit gebeurt, verwerk de regel. // if (result.substr (-2) == "=>") // // Kijk of sommige van de vorige regels // variable declarations hadden // resultaat = ProcessPreviousNodes (knooppunt) + "\ n" + resultaat; // // Kijken of andere gebieden variabele definities hebben // var pnode = node.parent.previousBranch (); while (pnode) if (pnode.modeContext () == = 'imath') if (! editor.nodeIsHiddenInFold (pnode) &&! editor.isCollapsed (pnode)) result = ProcessPreviousNodes (pnode.lastChild) + "\ n" + result; pnode = pnode.previousBranch () ; // // Bereken het resultaat Als Berekenen een array retourneert, zijn er // variabelen ook in fig. Getast. Haal het eindresultaat op // var cresult = Bereken (result); if (isArray (cresult)) // // We krijgen meer dan alleen antwoord.Dan haal daarom gewoon het laatste resultaat. // cresult = cresult [cresult.length - 1]; // // Plaats het resultaat samen met de originele regel. // result = node.text () + "" + cresult; // // De regel bijwerken // node.setText (result); // // Een treeChan toevoegen ged event handler om erachter te komen wanneer // een berekening moet worden uitgevoerd. // Extensions.addTreeChanged (function (editor, e) var delta's = e.deltas;; for (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); ); De Extensions.addTreeChanged () functie wordt gebruikt om in te haken in de routelijnen voor het wijzigen van tekst. FoldingText houdt een boomstructuur bij van elke regel tekst in het document. Wanneer de boomstructuur wordt gewijzigd, wordt elke geregistreerde functie aangeroepen met de editorinstantie en een structuur van delta's.
De functie doorloopt elke updatedelta en toevoeging om te bepalen of deze zich in de imath gebied met behulp van de inMathArea () functie. Als dat zo is en de laatste twee tekens in de regel zijn =>, dan de ProcessMathNode () functie wordt aangeroepen. De ProcessMathNode () functie roept een aantal hulpfuncties op om terug naar het document te klimmen om relevant te worden imath secties.
Als een sectie verborgen is, wordt deze genegeerd. Op die manier kunnen verschillende scenario's worden gebruikt en geëvalueerd. Eens alles relevant imath secties worden verwerkt, het geheel wordt gegeven Berekenen() om de resultaten te evalueren. De resultaten worden met de juiste spatiëring aan het einde van de regel toegevoegd en terug in de boom verzonden. De wiskundige extensie berekent alleen direct nadat de gebruiker een a heeft ingevoerd =>.
De iMath-extensie testenNadat u het bestand hebt opgeslagen, moet u opnieuw laden FoldingText. Probeer de bovenstaande regels uit en bekijk de resultaten. Onthoud gewoon: om een uitdrukking opnieuw te evalueren, moet je de vorige resultaten verwijderen. Het nieuwe resultaat wordt berekend en teruggestuurd naar het document.
FoldingText maakt gebruik van Less.js om de gebruikersinterface te stylen. FoldingText is echt een webbrowser zonder alle gebruikersinterfaces van de webbrowser.
Er zijn twee manieren om hoe te veranderen FoldingText ziet eruit: toevoegen Less.js verklaringen voor de user.less bestand dat een map is uit de map Plug-ins of voeg het toe aan een style.less bestand in elke plugin-map.
Open bijvoorbeeld Finder in de map Plug-ins en ga één map omhoog. Open daar de user.less het dossier. Je zult zien:
// Dit is uw user.less. Gebruik het om de standaardstijl te overschrijven. Wanneer dit // -bestand eerst wordt gemaakt, worden alle regels van commentaar voorzien (beginnen met //) en dus heeft // geen effect in de stijl van de editor. // Om het uncommentment van het lettertype op de volgende regel te wijzigen: // @ fontFamily: Menlo; // Om de lettergrootte te wijzigen, reageer op de volgende regel: // @ fontSize: 10pt; // De basisinktkleur wijzigen (gebruikt voor tekst) uncomment de volgende // line: // @ inkColor: zwart; // Om de basiskleur van "papier" (achter de tekst) te wijzigen, de volgende commentaarregel // line: // @ paperColor: white; // Kleur gebruikt om iets aan te geven. Zoals wanneer de muis zich boven een link bevindt. // @ markedColor: blue;
Dit zijn enkele van de standaardwaarden die u kunt wijzigen. Ik geef de voorkeur aan grotere tekst, dus verwijder de commentaarindicator voor de @lettertypegrootte variabele en stel deze in op 12pt. Wanneer u opslaat en opnieuw laadt FoldingText, alle tekst is gebaseerd op 12pt grootte.
Als u iets wilt wijzigen dat niet in het bestand staat, opent u de Debugger om de DOM te browsen. Vind wat je zoekt, ontvang de ID en wijzig deze in de Less.js het dossier.
Terwijl u al deze extensies maakt, moet u uw code debuggen of bladeren door de DOM om te vinden wat u moet wijzigen. FoldingText maakt dat echt gemakkelijk.
De foutopsporing Wanneer u de Run Editor link op de Software ontwikkelingspakket, je krijgt de FoldingText Editor met besturingselementen voor foutopsporing. Selecteer de Inspecteur in de werkbalk geeft de standaard weer Safari ontwikkelaarstools. Dit geeft je alle tools die je nodig hebt om alles te debuggen FoldingText. Je kunt controleren Apple Safari's handleiding voor ontwikkelaars voor informatie over het gebruik van de ontwikkelaarstools.
In deze zelfstudie heb ik je laten zien hoe je fragmenten, sneltoetsen, opdrachten, scripts, extensies en thema's kunt maken voor FoldingText. Omdat het allemaal gebaseerd is op webbrowsertechnologie, is de leercurve eenvoudig. Met alle rijkdom van JavaScript beschikbare bibliotheken, er is bijna geen limiet aan wat je kunt doen FoldingText.
