Share
Cosa starai creandoIl Mac ha molte applicazioni che sono minimaliste: programmi che presentano il numero minimo di opzioni possibili pur mantenendo le funzionalità. Esistono molti editor di testo minimalisti. FoldingText si distingue come diverso.
In questo tutorial, ti presenterò il FoldingText editor e mostra come estenderlo con:
Non solo è FoldingText minimalista nel design, ma anche in formato file: utilizza solo file di testo normale. Tutta la formattazione è fatta con riduione di prezzo con una svolta: puoi contrassegnare qualsiasi area con una formattazione e funzionalità speciali aggiungendo un'estensione alla fine di una riga di intestazione.
Finestra e menu di FoldingText Quando lanci FoldingText, ti viene presentata una finestra semplice. Questa interfaccia grafica pulita e minimale aiuta a concentrarsi sulla scrittura e non sul programma.
Alcuni Markdown Mentre scrivi riduione di prezzo comandi di formattazione, il testo è evidenziato e le cose extra, come gli indirizzi in un collegamento, sono nascoste. Nell'esempio sopra, puoi vedere il riduione di prezzo per un'ancora mentre il cursore è ancora su di essa.
Nascondere il tag di ancoraggio Quando ci si sposta su una nuova riga o si aggiunge un altro personaggio, FoldingText nasconde i dettagli dell'indirizzo in modo da vedere solo il titolo.
Testo pieghevole Ora modifica il riduione di prezzo testo per essere un'intestazione e fare clic sul # simbolo accanto introduzione. Questo rapidamente piega il testo in quella sezione fino alla successiva intestazione. Il simbolo del testo piegato è mostrato nell'angolo in alto a sinistra. Inoltre, aggiunge a ... (un'ellissi) fino alla fine della sezione piegata. Facendo clic sul simbolo triangolare nell'angolo in alto a sinistra o sul simbolo ... alla fine della sezione piegata si aprirà quel testo.
Estensioni Todo e Timer La vera innovazione trovata in FoldingText sono le estensioni. FoldingText viene fornito con due estensioni pre-costruite in: fare, e Timer.
Il fare estensione ti offre un elenco di cose da fare a più livelli con caselle di controllo.
Il Timer l'estensione ti dà i timer per avvisarti. I timer funzionano come timer per il conto alla rovescia. Se crei una lista con tempi sulle linee, eseguirà il conto alla rovescia del tempo più alto, ti invierà un messaggio e inizierà la volta successiva. È possibile creare tutte le aree di estensione in un documento di cui si ha bisogno.
Come puoi vedere nell'esempio di elenco di cose da fare, puoi taggare qualsiasi linea in FoldingText. La sintassi del tag è @ e del testo. FoldingText usa alcuni tag per la formattazione speciale (es .: il cross-out sul file @fatto etichetta).
comandi FoldingText ha una palette di comandi, simile a quella resa popolare con Testo sublime. Quando si preme Comando-Citazione, apparirà una lista di tutti i comandi disponibili. Non ha molti comandi integrati, quindi ti mostrerò come aggiungerne alcuni.
Per iniziare a collegare, si inizia con il Plug-In Manager.
Apertura del gestore plug-in Dal FoldingText Menu principale, selezionare Plug-In Manager.
Plug-In Manager Il pannello lefhand mostra un elenco di ogni plug-in installato. Cliccando su uno mostra la sua descrizione sul pannello laterale destro. Tutte queste estensioni sono scaricabili da FoldingTextsul sito Web facendo clic su Trova plug-in pulsante.
Per creare un plug-in, vai alla directory dei plug-in selezionando Apri la cartella dei plug-in pulsante in basso a destra.
Cartella plug-in Questo si apre mirino nella directory che contiene tutti i plug-in. Crea una directory chiamata MySnippets.ftplugin. In quella directory, crea i file main.js e package.json. Questi sono i file minimi necessari per un plug-in.
FoldingText le estensioni sono codificate con JavaScript. Il package.json il file dà FoldingText informazioni da visualizzare nel Plug-In Manager.
Nel package.json file, inserire quanto segue:
"name": "MySnippets", "version": "1.0.0", "description": "Aggiunge i miei propri frammenti, comandi e associazioni di tasti a Folding Text.", "homepage": "", "engines" : "foldingtext": "> 2.0.0", "taskpaper": "> 3.0.0"
Questo dice FoldingText a proposito del plug-in nome, versione, descrizione, homepage dell'autore e quali versioni di FoldingText o TaskPaper usare. Solo FoldingText 2.0.0 o TaskPaper 3.0.0 e maggiori plug-in di supporto.
Per aggiungere snippet a FoldingText, aggiungi le seguenti linee al main.js file:
Accentsconagua
// // MySnippet e varie espansioni a FoldingText. // define (function (require, exports, module) // // Ottieni un riferimento alle estensioni // var Extensions = require ('ft / core / extensions'). Estensioni; // // Usa addSnippet per creare il mio diversi frammenti. // Extensions.addSnippet ('; tut': '## Due: \ nFoldable \ n \ n ## Teaser \ n \ n \ n \ n ## Nome tutorial \ n \ n \ n \ n # ## Conclusioni \ n \ n \ n \ n ## Cose da fare.todo \ n- Scrivi l'articolo \ n- Prova leggi l'articolo \ n- Invia l'articolo \ n ','; codice ': function () return '## Code \ n \ n ## End Code \ n \ n';);); Tutti i file delle estensioni iniziano con definire() funzione. Quella funzione accetta una funzione che quando viene chiamata accetta tre oggetti: richiedere, esportazioni, e modulo. Il richiedere oggetto ti permette di acquisire qualsiasi libreria come la estensioni libreria per aggiungere cose a FoldingText.
Per creare snippet, usa il AddSnippet funzione di estensioni. Si aspetta un array di valori-chiave JSON. La chiave sarà il testo di espansione e il valore verrà valutato in testo per sostituire la chiave. Il lato di espansione può essere di testo o una funzione.
Ho definito due frammenti qui: ; tut e ;codice. Quando si digita un testo seguito da una scheda, il testo verrà espanso di conseguenza. Il ; tut snippet mi dà un layout tutorial minimo nullo. Il ;codice snippet mi dà un blocco di codice pieghevole in modo da poter ripulire il codice prima di ottenere un conteggio delle parole del mio tutorial.
Per aggiungere scorciatoie da tastiera, puoi utilizzare un hook per avviare il motore di editor. Subito dopo il codice per i frammenti, aggiungi questo codice:
// // Crea una funzione per quando viene caricato l'editor per caricare le informazioni speciali di debug // e le mappature della tastiera. // Extensions.addInit (function (editor) // // Aggiungi KeyMappings personalizzati // editor.addKeyMap ('Alt-C': 'formatCodeblock');, Extensions.PriorityLast); Il Extensions.addInit () la funzione aggiunge la funzione al processo di inizializzazione per l'editor. Il editore l'oggetto sarà passato alla funzione. Usando il editor.addKeyMap () funzione, una scorciatoia da tastiera è facilmente aggiunta all'editor.
Questa funzione si aspetta un elenco di valori chiave json con la chiave come scorciatoia da tastiera e il valore è il nome della funzione da eseguire. Poiché uso spesso i blocchi di codice, ho creato una scorciatoia per questo.
Se sei bravo JavaScript programmare, creare i propri comandi è facile. Qualsiasi comando effettuato sarà disponibile nella palette dei comandi. Lavoro con molte liste di cose da fare e spesso spostando gli articoli avanti e indietro. Puoi automatizzarlo con il seguente codice:
// // Avanti, aggiungi comandi per FoldingText. // Extensions.addCommand (name: 'moveTDNext', descrizione: 'Sposta il nodo Todo corrente alla successiva lista Todo.', PerformCommand: function (editor) var cnode = editor.selectedRange (). StartNode, pnode = cnode .previousBranch (), snode; // // Ottieni l'intestazione superiore per l'elenco di cose corrente. // while (pnode.type ()! = 'heading') pnode = pnode.previousBranch (); // / / Vai al prossimo ramo che è un elenco di cose da fare e rendere // sicuro di essere in cima // // snode = pnode.nextBranch (); while (snode.type ()! = "Heading") snode = snode. nextBranch (); // // Aggiungilo a questo punto. // snode.appendChild (cnode);); Extensions.addCommand (nome: 'moveTDPrevious', descrizione: 'Sposta il nodo Todo corrente nella lista Todo precedente.', PerformCommand: function (editor) var cnode = editor.selectedRange (). StartNode, pnode = cnode.previousBranch (), snode; // // Vai all'inizio dell'elenco corrente di todo. // while (pnode.type ()! = 'heading') pnode = pnode.previousBranch (); // // Vai a l'elenco precedente e assicurarsi che sia il top. // snode = pnode.previousBranch (); while (snode.type ()! = "heading") snode = snode.previousBranch (); // // Aggiungi a quel ramo. // snode.appendChild (cnode););
Il Extensions.addCommand () la funzione è usata per creare un nuovo comando. In questo esempio di codice, i comandi sono: moveTDNext, e moveTDPrevious. moveTDNext sposta la voce corrente in cui il cursore si trova sulla successiva lista di cose da fare. moveTDPrevious fa esattamente il contrario.
Il Extensions.addCommand () prende una lista JSON con tre elementi: nome, descrizione, e performCommand. Il nome item è una stringa che dà un nome al comando senza spazi. Il descrizione è una stringa che descrive cosa fa il comando. Questa descrizione verrà mostrata nella palette dei comandi. Il performCommand è una funzione che accetterà un editore istanza e non restituire nulla.
Menu Aiuto In queste funzioni, utilizzo l'API dell'editor per passare all'intestazione dell'elenco di cose corrente, passare all'elenco successivo o precedente e aggiungere l'elemento a tale elenco. L'API è troppo grande per descrivere questo tutorial. Tutti i documenti API sono accessibili da Aiuto> Kit di sviluppo software menu.
Kit di sviluppo software Il Documentazione il collegamento aprirà la documentazione HTML nel browser Web predefinito. Il Esegui editor il link inizierà FoldingText istanza con il debugger del codice abilitato. Il Esegui specifiche link eseguirà tutte le specifiche su FoldingText e ognuna delle sue estensioni.
Nel FoldingText terminologia, a copione sta usando AppleScript iniettare a JavaScript funzione in FoldingText per eseguire un'azione. FoldingText aggiunge due parole chiave in esso AppleScript dizionario: valutare e mettere a punto. Tutti e due valutare e mettere a punto prendere un JavaScript e parametri per l'input, ma valutare lo esegue e restituisce il risultato mentre mettere a punto lancia lo script nella finestra del debug.
Un buon esempio potrebbe essere ottenere un elenco di tag dalla finestra più in alto. Apri il AppleScript Editor con questo codice:
tell all'applicazione "FoldingText" imposta lstDocs ai documenti se lstDocs ≠ quindi comunica l'elemento 1 di lstDocs return (valuta lo script "function (editor) return editor.tree (). tags (true) .sort ();") end tell end if end tell
Questo dice il primo FoldingText documento per valutare a JavaScript funzione che accetta un'istanza di editor. La funzione ottiene i tag da FoldingText editore oggetto e li restituisce ordinati.
Script per ottenere tag Quando questo script viene eseguito, il risultato sono i tag nel documento corrente. Qui il documento corrente ha i tag fatto e Il prossimo. Uso questo script insieme ad altri in un flusso di lavoro Alfred. Puoi ottenere il flusso di lavoro dal download per questo articolo.
Un'estensione per FoldingText aggiunge nuove funzionalità all'editor. Un blocco matematico che consente di fare alcuni calcoli sarebbe davvero bello avere.
Crea una nuova estensione chiamata imath.ftplugin. Nel file package.json, aggiungere quanto segue:
"nome": "modalità iMath", "versione": "1.0.0", "descrizione": "Aggiunge 'modalità imath'", "homepage": "https://customct.com", "motori": "foldingtext": "> 2.0.0"
Questo fornisce tutte le informazioni necessarie per descrivere l'estensione.
Per fare la matematica attuale, il framework Math.js è fantastico. Scarica la libreria e inseriscila nella directory con main.js file.
Nel main.js file, aggiungi questo codice:
// // File: main.js // // Descrizione: questo file definisce la modalità matematica per FoldingText. // elabora le linee matematiche usando la libreria mathjs. // define (function (require, exports, module) 'use strict'; // // Carica le librerie che ho bisogno di usare. // var Extensions = require ('ft / core / extensions'). Estensioni; var Math = require ("./ mathjs.js"); // // Aggiungi l'estensione della modalità 'matematica' al sistema. // Extensions.addMode (name: 'imath');); Questa estensione inizia proprio come l'estensione snippet. Dopo aver ottenuto un riferimento al estensioni biblioteca, richiedere è usato per caricare il math.js libreria dalla cartella delle estensioni. Per caricare librerie locali, richiedere utilizza un percorso relativo al nome completo del file della libreria.
Il prossimo, Extensions.addMode () la funzione è usata per aggiungere una nuova modalità con il nome imath. Questa funzione accetta un elenco json con la chiave nome imposta il nome della nuova estensione: imath. Ciò consente a un blocco di testo di essere definito come contenente matematica per il imath estensione da valutare.
Sono necessarie alcune funzioni di supporto. Aggiungi questo codice dopo il Extensions.addMode () funzione:
// // Funzione: inMathArea // // Descrizione: questa funzione determina se il nodo corrente si trova in // un'area matematica e non è vuoto. // function inMathArea (node) if ((node.modeContext () === 'imath') && (node.text (). trim ()! = "")) return (true); else return (false); ; // // Funzione: Calcola // // Descrizione: questa funzione ottiene il nodo corrente e il contenuto della stringa // del nodo corrente. Restituisce il risultato del calcolo. // function Calculate (str) var result = 0, scope = ; prova // // Usa la libreria Mathjs per valutare l'equazione. // 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 ha avuto un problema con le espressioni. Restituire un? // result = "?" + "-" + e.toString (); return (risultato); ; La funzione inMathArea () prende un nodo e determina se quel nodo si trova in un'area di testo matematica chiamando node.modeContext (). Poiché l'elaborazione di righe vuote non porta a nulla, controlla anche tale condizione.
Il Calcolare() la funzione chiamerà il Math.js libreria per valutare la stringa data. Se la libreria genera un'eccezione, restituisce un punto interrogativo. La stringa da valutare sarà l'intera riga tranne gli ultimi due caratteri.
L'ultima cosa da fare è collegarsi alla routine che viene chiamata ogni volta che l'utente cambia il testo. Aggiungi queste righe di codice dopo il Calcolare() funzione:?
// // Funzione: ProcessPreviousNodes // // Descrizione: Questa funzione esegue la scansione delle righe imath precedenti che // non sono nascoste. Le linee nascoste vengono ignorate, ma // le righe visibili vengono elaborate per una corretta matematica. // function ProcessPreviousNodes (node) var pnode = node, text = "", result = ""; while (pnode && (! pnode.mode ()) && (pnode.modeContext () === 'imath')) // // Non è un'intestazione, controlla se ha un comando di valutazione. // 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 "=>". If if, process the line. // if (result.substr (-2) ==" => ") // // Controlla se alcune delle righe precedenti avevano // dichiarazioni di variabili. // result = ProcessPreviousNodes (nodo) + "\ n" + risultato; // // Guarda se altre aree hanno definizioni di variabili. // 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 () ; // // Calcola il risultato.Se Calcola restituisce un array, c'erano anche le variabili //. Ottieni il risultato finale // var cresult = Calcola (risultato); if (isArray (cresult)) // // Otterremo più di una risposta indietro, quindi // otterrà solo l'ultimo risultato // cresult = cresult [cresult.length - 1]; // // Metti il risultato insieme alla riga originale. // result = node.text () + "" + cresult; // // Aggiorna la riga. // node.setText (result); // // Aggiungi un TreeChan gestore di eventi ged per capire quando eseguire // un calcolo. // Extensions.addTreeChanged (funzione (editor, e) var deltas = 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); ); Il Extensions.addTreeChanged () la funzione viene utilizzata per collegarsi alle routine di cambio del testo. FoldingText mantiene una struttura ad albero di ogni riga di testo nel documento. Quando viene modificata la struttura ad albero, ogni funzione registrata verrà chiamata con l'istanza dell'editor e una struttura di delta.
La funzione esegue il ciclo di ogni delta e aggiunta di aggiornamento per determinare se è presente nel imath area usando il inMathArea () funzione. Se lo è e gli ultimi due caratteri della linea sono =>, poi il ProcessMathNode () la funzione è chiamata. Il ProcessMathNode () funzione chiama un paio di funzioni di supporto per risalire il documento per ottenere qualsiasi pertinente imath sezioni.
Se una sezione è nascosta, viene ignorata. In questo modo possono essere utilizzati e valutati diversi scenari. Una volta tutti pertinenti imath le sezioni vengono elaborate, il tutto viene assegnato a Calcolare() per valutare i risultati. I risultati vengono aggiunti alla fine della riga con spaziatura adeguata e inviati nuovamente nell'albero. L'estensione matematica verrà calcolata solo dopo che l'utente digita in a =>.
Testare l'estensione iMathUna volta salvato il file, dovrai ricaricare FoldingText. Prova le linee sopra e guarda i risultati. Ricorda: per rivalutare un'espressione devi cancellare i risultati precedenti. Il nuovo risultato verrà calcolato e restituito al documento.
FoldingText fare uso di Less.js per modellare la sua interfaccia utente. FoldingText è davvero un browser web senza tutta l'interfaccia utente del browser web.
Ci sono due modi per cambiare il modo FoldingText guarda: aggiungi Less.js dichiarazioni al user.less file che è una directory dalla directory Plug-Ins o aggiungila a style.less file in qualsiasi cartella di plugin.
Ad esempio, apri Finder nella cartella Plug-Ins e vai su una directory. Lì, apri il user.less file. Vedrai:
// Questo è il tuo utente. Usalo per sovrascrivere lo stile predefinito. Quando questo // file viene creato per la prima volta tutte le linee sono commentate (inizia con //) e quindi // non ha alcun effetto nello stile dell'editor. // Per cambiare il carattere, rimuovere il commento dalla seguente riga: // @ fontFamily: Menlo; // Per modificare la dimensione del font rimuovere il commento dalla seguente riga: // @ fontSize: 10pt; // Per cambiare il colore "inchiostro" di base (usato per il testo) rimuovere il commento dalla seguente // riga: // @ inkColor: black; // Per cambiare il colore di "carta" di base (dietro al testo) rimuovere il commento dalla seguente // riga: // @ paperColor: white; // Colore usato per indicare qualcosa. Ad esempio quando il mouse si trova su un link. // @ indicatoColore: blu;
Queste sono alcune delle impostazioni predefinite che è possibile modificare. Preferisco il testo più grande, quindi rimuovi l'indicatore dei commenti per @dimensione del font variabile e impostarlo su 12pt. Quando salvi e ricarichi FoldingText, tutto il testo sarà basato su 12pt taglia.
Se c'è qualcosa che vuoi cambiare che non è elencato nel file, apri il Debugger per navigare nel DOM. Trova quello che vuoi, ottieni il suo ID e cambialo nel Less.js file.
Mentre crei tutte queste estensioni, dovrai eseguire il debug del tuo codice o navigare nel DOM per trovare quello che devi modificare. FoldingText lo rende davvero facile.
Il debugger Quando si seleziona il Esegui editor link sul Kit di sviluppo software, ottieni il FoldingText Editor con controlli per il debug. Selezione del Ispettore nella barra degli strumenti mostra lo standard Safari strumenti di sviluppo. Questo ti dà tutti gli strumenti necessari per eseguire il debug di qualsiasi cosa FoldingText. Puoi controllare Guida per gli sviluppatori di Apple Safari per informazioni sull'utilizzo degli strumenti di sviluppo.
In questo tutorial ti ho mostrato come creare snippet, scorciatoie da tastiera, comandi, script, estensioni e temi per FoldingText. Poiché si basa tutto sulla tecnologia dei browser Web, la curva di apprendimento è semplice. Con tutta la ricchezza di JavaScript librerie disponibili, non c'è quasi limite a ciò che si può fare con FoldingText.
