Share
Ce veți creaMacul are numeroase aplicații care sunt minime: programe care prezintă numărul minim de opțiuni posibile, păstrând în același timp funcționalitatea. Există mulți editori de text minimalist. FoldingText se deosebește.
În acest tutorial, vă prezint FoldingText editor și vă arată cum să îl extindeți cu:
Nu numai că este FoldingText minimalist în design, dar și în format de fișier: utilizează numai fișiere text simplu. Toate formatele se fac cu Markdown cu o întoarcere: Puteți marca orice zonă ca având formatare și funcționalitate specială prin adăugarea unei extensii la sfârșitul unei linii de antet.
FoldingText Window și meniuri Când lansezi FoldingText, vă sunt prezentate cu o fereastră simplă. Această interfață grafică curată și minimă ajută la focalizarea pe scriere și nu pe program.
Unele Markdown Pe măsură ce tastați Markdown comenzile de formatare, textul este evidențiat și lucrurile suplimentare - cum ar fi adresele dintr-o legătură - sunt ascunse. În exemplul de mai sus, puteți vedea Markdown pentru o ancorare în timp ce cursorul este încă pe el.
Ascunderea etichetei de ancorare Când vă mutați la o linie nouă sau adăugați un alt caracter, FoldingText ascunde detaliile adresei, astfel încât să vedeți numai titlul.
Text pliabil Acum editați Markdown text pentru a fi un antet și faceți clic pe # lângă simbol Introducere. Acest lucru se îndoaie rapid în secțiunea respectivă până la următorul antet. Simbolul textului pliat este afișat în colțul din stânga sus. De asemenea, adaugă a ... (o elipsă) până la capătul secțiunii pliate. Dând clic pe simbolul triunghiular în colțul din stânga sus sau pe ... la sfârșitul secțiunii pliate se va desfasura acel text.
Extensiile Todo și Timer Inovația reală găsită în FoldingText este extensiile. FoldingText vine cu două extensii pre-construite în: a face, și timer.
a face Extensia vă oferă o listă cu mai multe niveluri cu casete de selectare.
timer vă oferă timeri pentru a vă avertiza. Timerele funcționează ca temporizatoare. Dacă faceți o listă cu ore pe linii, aceasta va face numărătoarea inversă în cel mai înalt interval, vă va transmite mesajul și va începe la data următoare. Aveți posibilitatea să creați cât mai multe zone de extensie într-un singur document de care aveți nevoie.
Așa cum puteți vedea în exemplul listă todo, puteți eticheta orice linie în FoldingText. Sintaxa etichetei este @ și un text. FoldingText utilizează anumite etichete pentru formatare specială (adică: traversarea pe @Terminat etichetă).
comenzi FoldingText are o paletă de comandă, similară cu cea populară Text sublim. Când apăsați Command-Citat, va apărea o listă cu toate comenzile disponibile. Nu are multe comenzi construite, așa că vă voi arăta cum să adăugați câteva.
Pentru a începe o conecteaza, începeți cu Plug-in Manager.
Deschiderea Managerului Plug-in De la FoldingText Meniul principal, selectați Plug-in Manager.
Plug-in Manager Panoul din stânga arată o listă a fiecărui plug-in instalat. Apăsând pe unul se afișează descrierea sa pe panoul din partea dreaptă. Toate aceste extensii pot fi descărcate de la FoldingTextsite-ul Web făcând clic pe Găsiți pluginuri buton.
Pentru a crea un plug-in, accesați directorul plug-in selectând Deschideți dosarul Plug-Ins butonul din dreapta jos.
Plug-Ins Folder Aceasta se deschide căutător în directorul care conține toate plug-in-urile. Creați un director numit MySnippets.ftplugin. În acest director, creați fișierele main.js și package.json. Acestea sunt fișierele minime necesare pentru un plug-in.
FoldingText extensiile sunt codate cu JavaScript. package.json fișier dă FoldingText informații de afișat în Plug-in Manager.
În package.json fișier, plasați următoarele:
"nume": "MySnippets", "versiune": "1.0.0", "descriere": "Adaugă propriile mele fragmente, comenzi și legături cheie în Text înclinat" : "foldingtext": "> 2.0.0", "taskpaper": "> 3.0.0"
Acest lucru spune FoldingText despre plug-in-urile Nume, versiune, Descriere, pagina principala a autorului și a versiunilor lui FoldingText sau TaskPaper a folosi. Numai FoldingText 2.0.0 sau TaskPaper 3.0.0 și mai multe plug-in-uri de suport.
Pentru a adăuga fragmente la FoldingText, adăugați următoarele linii la main.js fişier:
Accentsconagua
// MySnippets și diverse extensii în FoldingText. // define (functie (necesita, export, modul) // // Obtineti o referinta la Extensions // var Extensions = necesita ('ft / core / extensions'). Fragmente diferite // Extensions.addSnippet ('; tut': '## Datorită: \ nFoldable \ n \ n ## Teaser \ n \ n \ n \ n ## Numele tutorialului \ n \ n \ n \ n # ## Concluzii \ n \ n \ n \ n ## Lucruri de făcut.Todo \ n- Scrieți articolul \ n- Demonstrați citirea articolului \ n- Trimiteți articolul \ n ','; code ': function returnează "## Codul \ n \ n ## Codul final \ n \ n ';);); Toate fișierele de extensii încep cu defini() funcţie. Această funcție are o funcție care, atunci când este chemată, va accepta trei obiecte: necesita, exporturi, și modul. necesita obiect vă permite să achiziționați orice bibliotecă, cum ar fi Extensii bibliotecă pentru a adăuga lucruri la FoldingText.
Pentru a crea fragmente, utilizați addSnippet funcția de Extensii. Se așteaptă o matrice de valori cheie pentru JSON. Cheia va fi textul de expansiune și valoarea se va evalua la text pentru a înlocui cheia. Partea de expansiune poate fi text sau o funcție.
Am definit două fragmente aici: ; Tut și ;cod. Când introduceți textul urmat de o filă, textul va fi extins corespunzător. ; Tut fragmentul mi-a oferit un aspect minim tutorial minim. ;cod fragmentul îmi dă un bloc de cod blocabil, astfel încât să pot elimina codul înainte de a obține un număr de cuvinte din tutorialul meu.
Pentru a adăuga comenzi rapide de la tastatură, utilizați un cârlig în pornirea motorului editorului. Imediat după codul pentru fragmente, adăugați acest cod:
// // Creați o funcție când editorul este încărcat pentru a încărca informații de depanare speciale și mapări ale tastaturii. // Extensions.addInit (funcție (editor)) // // Adăugarea personalizărilor KeyMappings // editor.addKeyMap ('Alt-C': 'formatCodeblock');, Extensions.PriorityLast); Extensions.addInit () funcția adaugă funcția la procesul de inițializare a editorului. editor obiect va fi trecut la funcția. Utilizarea editor.addKeyMap () , o comandă rapidă de la tastatură este ușor adăugată editorului.
Această funcție se așteaptă la o listă de valori pentru chei json, cu cheia fiind comanda rapidă de la tastatură, iar valoarea este numele funcției care trebuie executată. Deoarece folosesc adesea blocuri de coduri, am făcut o scurtătură pentru asta.
Dacă ești bun la JavaScript programarea, crearea de comenzi proprii este ușoară. Orice comandă făcută va fi disponibilă în paleta de comandă. Eu lucrez cu multe liste de todo și de multe ori mișcări de elemente înainte și înapoi. Puteți să o automatizați cu următorul cod:
// // Apoi adăugați comenzi pentru FoldingText. // Extensions.addCommand (name: 'moveTDNext', descriere: 'Muta nodul curent Todo in urmatoarea lista Todo.', FunctionCommand: function (editor) var cnode = editor.selectedRange .previousBranch (), snode; // // Ajungeți la antetul superior pentru lista curentă de todo. // // în timp ce (pnode.type ()! = 'titlu') pnode = pnode.previousBranch (); / Mergeți la următoarea ramură care este o listă todo și faceți-vă că sunteți în partea de sus // snode = pnode.nextBranch (); în timp ce (snode.type ()! = "Heading") snode = snode. nextBranch (); // // Adăugați-l la acest punct. // snode.appendChild (cnode);); Extensions.addCommand (name: 'moveTDPrevious', descriere: 'Deplasați actualul nod Todo în lista Todo anterioară', performCommand: funcția (editor) var cnode = editor.selectedRange () startNode, pnode = cnode.previousBranch (pnode.type ()! = 'titlu')) pnode = pnode.previousBranch (); // // Mergeți la (snode.type ()! = "heading") snode = snode.previousBranch (); // // Adăugați în lista precedentă și asigurați-vă că aceasta este partea de sus. // snode = pnode.previousBranch acea ramură. // snode.appendChild (cnode););
Extensions.addCommand () funcția este utilizată pentru a crea o comandă nouă. În acest exemplu de cod, comenzile sunt: moveTDNext, și moveTDPrevious. moveTDNext mută elementul curent pentru a reda cursorul pe următoarea listă todo. moveTDPrevious face exact contrariul.
Extensions.addCommand () ia o listă json cu trei elemente: Nume, Descriere, și performCommand. Nume element este un șir care dă un nume comenzii fără spații. Descriere este un șir care descrie ce face comanda. Această descriere va fi afișată în paleta de comandă. performCommand este o funcție care va accepta o editor instanță și nu returnează nimic.
Meniul de ajutor În aceste funcții, folosesc API-ul editorului pentru a trece la antetul listei actuale de mandate, pentru a trece la lista următoare sau anterioară și pentru a adăuga elementul la lista respectivă. API-ul este prea mare pentru a descrie acest tutorial. Toate documentele API sunt accesibile de la Ajutor> Kitul de dezvoltare software meniul.
Kit de dezvoltare software Documentație link va deschide documentația HTML în browserul web implicit. Rulați editorul link-ul va începe FoldingText exemplu cu debuggerul de cod activat. Executați specificații linkul va rula toate specificațiile pe FoldingText și fiecare dintre extensiile acestuia.
În FoldingText terminologie, a scenariu utilizează AppleScript să injectați a JavaScript funcția în FoldingText pentru a efectua o acțiune. FoldingText adaugă două cuvinte cheie în e AppleScript dicţionar: a evalua și depanare. Ambii a evalua și depanare ia-o JavaScript și parametrii pentru intrare, dar a evalua rulează și returnează rezultatul în timp ce depanare lansează scriptul în fereastra de depanare.
Un bun exemplu ar fi obținerea unei liste de etichete din cea mai mare fereastră de sus. Deschide Editorul AppleScript cu acest cod:
spuneți aplicația "FoldingText" setați lstDocs în documente dacă lstDocs ≠ apoi spuneți elementul 1 din lstDocs return (evaluarea scriptului "funcția (editor)) return () editor tags (true) .sort (); spuneți sfârșit dacă spuneți sfârșitul
Asta spune prima FoldingText document de evaluare a JavaScript care acceptă o instanță editor. Funcția primește etichetele de la FoldingText editor obiecte și le returnează sortate.
Script pentru obținerea etichetelor Când acest script este executat, rezultatul este etichetele din documentul curent. Aici documentul curent conține etichetele Terminat și Următor →. Folosesc acest script împreună cu ceilalți într-un flux de lucru Alfred. Puteți obține fluxul de lucru din descărcare pentru acest articol.
O prelungire pentru FoldingText adaugă noi funcționalități editorului. Un bloc de matematică care permite efectuarea unor calcule ar fi foarte frumos să aibă.
Creați o extensie nouă numită imath.ftplugin. În fișierul package.json, adăugați următoarele:
"name": "Modul iMath", "versiunea": "1.0.0", "descriere": "Adăugă" imath "mode," homepage ":" https://customct.com "," motors ": "foldingtext": "> 2.0.0"
Aceasta oferă toate informațiile necesare pentru a descrie extensia.
Pentru a face matematica reală, cadrul Math.js este grozav. Descărcați această bibliotecă și plasați-o în directorul cu main.js fişier.
În main.js fișier, adăugați acest cod:
// // Fișier: main.js // // Descriere: Acest fișier definește modul matematic pentru FoldingText. // procesează liniile matematice folosind biblioteca mathjs. // define (functie (necesita, export, modul) 'use strict'; // // Load bibliotecile pe care trebuie sa le folosesc // var Extensions = require ('ft / core / extensions'). = necesita ("./ mathjs.js"); // // Adăugați extensia "math" în sistem. // Extensions.addMode (name: 'imath');); Această extensie începe exact ca extensia de fragmente. După ce a făcut o trimitere la Extensii bibliotecă, necesita este folosit pentru a încărca math.js bibliotecă din dosarul extensii. Pentru a încărca bibliotecile locale, necesita utilizează o cale relativă la numele complet al fișierului bibliotecii.
Următor →, Extensions.addMode () funcția este utilizată pentru a adăuga un nou mod cu numele imath. Această funcție acceptă o listă json cu cheia Nume setați la numele extensiei noi: imath. Acest lucru permite ca un bloc de text să fie definit ca conținând matematică pentru imath extindere pentru a evalua.
Sunt necesare câteva funcții de ajutor. Adăugați acest cod după Extensions.addMode () funcţie:
// // Funcție: inMathArea // // Descriere: Această funcție determină dacă nodul curent este în // o zonă matematică și nu este gol. // functie inMathArea (nod) if ((node.modeContext () === 'imath') && (node.text () trim ()! altceva return (false); ; // // Funcție: Calculați // // Descriere: Această funcție obține nodul curent și conținutul nodului // // șir. Aceasta returnează rezultatul calculului. // funcția Calculați (str) var rezultat = 0, domeniul = ; încercați // // utilizați biblioteca Mathjs pentru a evalua ecuația. // varlines = str.substr (0, str.length - 2) .split ("\ n"); lines.forEach (funcție (linie) var node, code; code = mathjs.compile (linie); rezultat = code.eval (domeniu);); catch (e) // // Mathjs a avut o problemă cu expresiile. Întoarceți? // result = "?" + "-" + e.toString (); retur (rezultat); ; Functia inMathArea () ia un nod și determină dacă nodul se află într-o zonă de text pentru matematică prin apelare node.modeContext (). Deoarece procesarea liniilor goale nu are nimic, verifică și această condiție.
Calculati() funcția va apela Math.js bibliotecă pentru a evalua șirul dat. Dacă biblioteca aruncă o excepție, ea returnează un semn de întrebare. Șirul de evaluat va fi întreaga linie, cu excepția ultimelor două caractere.
Ultimul lucru pe care trebuie să-l faceți este să vă conectați la rutina numită ori de câte ori utilizatorul modifică textul. Adăugați aceste linii de cod după Calculati() funcţie:?
// // Funcție: ProcessPreviousNodes // // Descriere: Această funcție scanează pentru linii anterioare imath care // nu sunt ascunse. Liniile ascunse sunt ignorate, dar // sunt prelucrate liniile vizibile pentru matematica corespunzătoare. // funcția ProcessPreviousNodes (nod) var pnode = nod, text = "", rezultat = ""; în timp ce (pnode && (! pnode.mode ()) && (pnode.modeContext () === 'imath')) // // Nu este o rubrică, vedeți dacă are o comandă de evaluare. // text = pnode.text (); dacă (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 "=>"Dacă este așa, procesați linia." // if (result.substr (-2) == "=>") // // Vezi dacă unele din liniile anterioare au avut // declarații variabile. (pnode) if (pnode.modeContext () == (nod)) + "\ n" + rezultat; = "imath") if (! editor.nodeIsHiddenInFold (pnode) &&! editor.isCollapsed (pnode)) rezultat = ProcessPreviousNodes (pnode.lastChild) + "\ n" + rezultat; pnode = pnode.previousBranch ; // Calcula rezultatul.În cazul în care Calculate returnează un matrice, au fost // variabilele calculate în, de asemenea, obțineți doar rezultatul final // var cresult = Calculați (rezultat); dacă (isArray (cresult)) // // vom primi doar rezultatul final // cresult = cresult [cresult.length - 1]; // // Introduceți rezultatul împreună cu linia originală. // result = node.text () + "" + cresult; // // Actualizați linia. // node.setText (rezultat); // // Adăugați un TreeChan ged handle handler pentru a afla cand sa ruleze // un calcul. // Extensions.addTreeChanged (funcție (editor, e) var deltas = e.deltas; pentru (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); ); Extensions.addTreeChanged () funcția este utilizată pentru a se conecta la rutinele de modificare a textului. FoldingText păstrează o structură arborescentă a fiecărui rând de text din document. Când se modifică structura arborelui, fiecare funcție înregistrată va fi apelată cu instanța editorului și cu o structură de deltas.
Funcția buclează prin fiecare delta de actualizare și plus pentru a determina dacă este în imath zona folosind inMathArea () funcţie. Dacă este și ultimele două caractere în linie sunt =>, apoi ProcessMathNode () se numește funcția. ProcessMathNode () funcția solicită câteva funcții de ajutor pentru a urca înapoi documentul pentru a obține informații relevante imath secțiuni.
Dacă o secțiune este ascunsă, atunci este ignorată. În acest fel pot fi utilizate și evaluate diferite scenarii. Odată ce toate relevante imath secțiunile sunt procesate, întregul este dat Calculati() pentru a evalua rezultatele. Rezultatele sunt adăugate la sfârșitul liniei cu spațierea corespunzătoare și trimise înapoi în copac. Extensia matematică se va calcula doar după ce utilizatorii au introdus în a =>.
Testarea extensiei iMathDupă ce salvați fișierul, va trebui să reîncărcați FoldingText. Încercați liniile de mai sus și vedeți rezultatele. Amintiți-vă: pentru a reevalua o expresie trebuie să ștergeți rezultatele anterioare. Noul rezultat va fi calculat și returnat în document.
FoldingText face uz de Less.js pentru stilul interfeței cu utilizatorul. FoldingText este într-adevăr un browser web fără întreaga interfață de utilizator a browserului web.
Există două moduri de a schimba modul în care FoldingText arată: adăugați Less.js declarații către user.less fișier care este un director de la directorul Plug-Ins sau adăugați-l la un style.less fișier în orice dosar plugin.
De exemplu, deschideți Finder în dosarul Plug-Ins și accesați un director. Acolo, deschideți user.less fişier. Vei vedea:
// Acesta este userul tău. Utilizați-l pentru a înlocui stilul implicit. Când acest fișier // este creat pentru prima dată, toate liniile sunt comentate (începeți cu //) și deci nu // are efect în stilul editorului. // Pentru a schimba fontul rupeți următoarea linie: // @ fontFamily: Menlo; // Pentru a modifica mărimea fontului rupeți următoarea linie: // @ fontSize: 10pt; // Pentru a schimba culoarea "cerneală" de bază (utilizată pentru text), deconectați următoarele // line: // @ inkColor: negru; // Pentru a schimba culoarea "hârtiei" de bază (în spatele textului), detașați următoarele // line: // @ paperColor: white; // Culoarea folosită pentru a indica ceva. Cum ar fi atunci când mouse-ul este peste o legătură. // @ indicat Culoare: albastru;
Acestea sunt câteva dintre valorile implicite pe care le puteți schimba. Prefer textul mai mare, eliminând astfel indicatorul de comentarii pentru @marimea fontului variabilă și setată la 12pt. Când salvați și reîncărcați FoldingText, tot textul se va baza pe 12pt mărimea.
Dacă există ceva pe care doriți să îl modificați, care nu este menționat în fișier, deschideți debugger pentru a naviga DOM. Găsiți ceea ce doriți, obțineți ID-ul și schimbați-l în Less.js fişier.
În timp ce realizați toate aceste extensii, va trebui să depanați codul sau să navigați în DOM pentru a găsi ce trebuie să modificați. FoldingText face ca acest lucru real ușor.
Debuggerul Când selectați Rulați editorul link pe Kit de dezvoltare software, veți obține FoldingText Editor cu comenzi pentru depanare. Selectarea Inspector în bara de instrumente arată standardul Safari instrumente de dezvoltare. Acest lucru vă oferă toate instrumentele de care aveți nevoie pentru a depana orice FoldingText. Poti sa verifici Ghidul dezvoltatorului Apple Safari pentru informații despre utilizarea instrumentelor pentru dezvoltatori.
În acest tutorial v-am arătat cum să creați fragmente, comenzi rapide de la tastatură, comenzi, scripturi, extensii și teme pentru FoldingText. Deoarece toate se bazează pe tehnologia browserului Web, curba de învățare este ușoară. Cu toată bogăția JavaScript biblioteci disponibile, nu există aproape nici o limită a ceea ce puteți face cu FoldingText.
