Lo que vas a crearLa Mac tiene muchas aplicaciones que son minimalistas: programas que presentan el número mínimo de opciones posibles y al mismo tiempo conservan la funcionalidad. Hay muchos editores de texto minimalistas.. FoldingText se destaca como diferente.
En este tutorial, te presentaré la FoldingText editor y le mostrará cómo ampliarlo con:
No solo es FoldingText Diseño minimalista, pero también en formato de archivo: solo utiliza archivos de texto plano. Todo el formateo se realiza con Reducción con un toque: puede marcar cualquier área con un formato y funcionalidad especiales agregando una extensión al final de una línea de encabezado.
Ventana y menús de texto plegable Cuando lanzas FoldingText, Te presentan una ventana lisa. Esta interfaz gráfica limpia y mínima ayuda a centrarse en la escritura y no en el programa.
Algunos Markdown Como usted escribe Reducción los comandos de formato, el texto se resalta y se ocultan elementos adicionales, como las direcciones en un enlace. En el ejemplo anterior, puedes ver el Reducción para un ancla mientras el cursor todavía está en ella.
Ocultar la etiqueta de anclaje Cuando te mueves a una nueva línea, o agregas otro personaje, FoldingText Oculta los detalles de la dirección para que solo veas el título..
Texto plegable Ahora edita el Reducción texto para ser un encabezado y haga clic en el # símbolo al lado Introducción. Esto dobla rápidamente el texto en esa sección hasta el siguiente encabezado. El símbolo de texto doblado se muestra en la esquina superior izquierda. Además, añade un ... (una elipsis) al final de la sección plegada. Al hacer clic en el símbolo triangular en la esquina superior izquierda o en ... Al final de la sección plegada se desplegará ese texto..
Extensiones Todo y Temporizador La verdadera innovación encontrada en FoldingText son las extensiones. FoldingText viene con dos extensiones pre-construidas en: que hacer, y minutero.
los que hacer extensión te da una lista de tareas de niveles múltiples con casillas de verificación.
los minutero La extensión te da temporizadores para avisarte. Los temporizadores funcionan como temporizadores de cuenta atrás. Si hace una lista con los tiempos en las líneas, contará la cuenta regresiva, le enviará un mensaje y comenzará la próxima vez. Puede crear tantas áreas de extensión en un documento como necesite.
Como puede ver en el ejemplo de la lista de tareas, puede etiquetar cualquier línea en FoldingText. La sintaxis de la etiqueta es @ y algún texto. FoldingText utiliza algunas etiquetas para un formato especial (es decir, el tachado en la @hecho etiqueta).
Comandos FoldingText tiene una paleta de comandos, similar a la que se hizo popular con Texto sublime. Cuando presionas Comando-Cita, Aparecerá una lista de todos los comandos disponibles. No tiene tantos comandos integrados, así que te mostraré cómo agregar algunos.
Para comenzar un enchufar, empiezas con el Plugin Manager.
Abrir el administrador de plugins Desde el FoldingText Menú principal, seleccione Plugin Manager.
Plugin Manager El panel izquierdo muestra una lista de todos y cada uno de los complementos instalados. Al hacer clic en uno, se muestra su descripción en el panel lateral derecho. Todas estas extensiones son descargables desde FoldingTextHaga clic en el sitio web de Encuentra complementos botón.
Para crear un complemento, vaya al directorio de complementos seleccionando Abrir carpeta de plug-ins botón en la parte inferior derecha.
Carpeta de plug-ins Esto abre Descubridor en el directorio que contiene todos los complementos. Crear un directorio llamado MySnippets.ftplugin. En ese directorio, crea los archivos. main.js y paquete.json. Estos son los archivos mínimos necesarios para un plug-in.
FoldingText las extensiones están codificadas con JavaScript. los paquete.json archivo da FoldingText información para mostrar en el Plugin Manager.
En el paquete.json archivo, coloque lo siguiente:
"name": "MySnippets", "version": "1.0.0", "description": "Agrega mis propios fragmentos de código, comandos y enlaces de teclas a Folding Text.", "homepage": "", "engines" : "foldtext": "> 2.0.0", "taskpaper": "> 3.0.0"
Esto le dice a FoldingText sobre los plug-in nombre, versión, descripción, página principal del autor, y qué versiones de FoldingText o TaskPaper usar. Solamente FoldingText 2.0.0 o TaskPaper 3.0.0 y mayores complementos de soporte.
Para agregar fragmentos a FoldingText, agrega las siguientes líneas a la main.js expediente:
Accentsconagua
Share// // MySnippets y varias expansiones a FoldingText. // define (función (require, exports, module) // // Obtenga una referencia a Extensions. // var Extensions = require ('ft / core / extensions'). Extensions; // // Use addSnippet para crear mi Fragmentos diferentes. // Extensions.addSnippet ('; tut': '## Due: \ nFoldable \ n \ n ## Teaser \ n \ n \ n \ n ## Tutorial Name \ n \ n \ n \ n # ## Conclusión \ n \ n \ n \ n ## Things To Do.todo \ n- Escriba el artículo \ n- Prueba lea el artículo \ n- Envíe el artículo \ n ','; código ': function () devuelva '## Code \ n \ n ## End Code \ n \ n';);); Todos los archivos de extensiones comienzan con el definir() función. Esa función toma una función que, cuando se le llame, aceptará tres objetos: exigir, las exportaciones, y módulo. los exigir objeto le permite adquirir cualquier biblioteca como el Extensiones biblioteca para agregar cosas a FoldingText.
Para crear fragmentos, use la addSnippet funcion de Extensiones. Se espera una matriz de valor-clave json. La clave será el texto de expansión y el valor se evalúa como texto para reemplazar la clave. El lado de expansión puede ser texto o una función..
Aquí definí dos fragmentos: ;gesto de desaprobación y ;código. Cuando escriba texto seguido de una pestaña, el texto se ampliará en consecuencia. los ;gesto de desaprobación Fragmento me da un diseño tutorial mínimo. los ;código el fragmento de código me da un bloque de código plegable para que pueda guardar el código antes de hacer un recuento de palabras de mi tutorial.
Para agregar métodos abreviados de teclado, utiliza un gancho para iniciar el motor del editor. Justo después del código de fragmentos, agregue este código:
// // Crear una función para cuando el editor se carga para cargar información especial de depuración // y asignaciones de teclado. // Extensions.addInit (function (editor) // // Agregar KeyMappings personalizados // editor.addKeyMap ('Alt-C': 'formatCodeblock');, Extensions.PriorityLast); los Extensions.addInit () La función agrega la función al proceso de inicialización del editor. los editor El objeto será pasado a la función. Utilizando la editor.addKeyMap () función, un atajo de teclado se agrega fácilmente al editor.
Esta función espera una lista de valor-clave json con la tecla que es el método abreviado de teclado y el valor es el nombre de la función que se ejecutará. Ya que uso bloques de código a menudo, hice un atajo para ello.
Si eres bueno en JavaScript Programación, creando tus propios comandos son fáciles. Cualquier comando realizado estará disponible en la paleta de comandos. Trabajo con muchas listas de tareas pendientes y con frecuencia moviendo elementos de un lado a otro. Puedes automatizar eso con el siguiente código:
// // A continuación, agregue comandos para FoldingText. // Extensions.addCommand (name: 'moveTDNext', descripción: 'Mueve el nodo de Todo actual a la siguiente Lista de tareas.', PerformCommand: function (editor) var cnode = editor.selectedRange (). StartNode, pnode = cnode .previousBranch (), snode; // // Ir al encabezado superior de la lista de tareas actual. // while (pnode.type ()! = 'encabezado') pnode = pnode.previousBranch (); // / / Vaya a la siguiente rama que es una lista de tareas pendientes y asegúrese de que // esté en la parte superior. // snode = pnode.nextBranch (); while (snode.type ()! = "Encabezado") snode = snode. nextBranch (); // // Agreguelo a este punto. // snode.appendChild (cnode);); Extensions.addCommand (name: 'moveTDPrevious', descripción: 'Mueve el nodo de Todo actual a la lista de tareas anterior.', PerformCommand: function (editor) var cnode = editor.selectedRange (). StartNode, pnode = cnode.previousBranch (), snode; // // Ir al principio de la lista de tareas actual. // while (pnode.type ()! = 'encabezado') pnode = pnode.previousBranch (); // // Ir a la lista anterior y asegúrese de que es la parte superior. // snode = pnode.previousBranch (); while (snode.type ()! = "encabezado") snode = snode.previousBranch (); // // Anexar a esa rama. // snode.appendChild (cnode););
los Extensions.addCommand () La función se utiliza para crear un nuevo comando. En este ejemplo de código, los comandos son: moverTDNext, y mover. moverTDNext mueve el elemento de tareas actual en el que se encuentra el cursor a la siguiente lista de tareas pendientes. mover hace exactamente lo contrario.
los Extensions.addCommand () Toma una lista json con tres elementos: nombre, descripción, y realizarComando. los nombre item es una cadena que da un nombre al comando sin espacios. los descripción es una cadena que describe lo que hace el comando. Esta descripción se mostrará en la paleta de comandos. los realizarComando Es una función que aceptará una editor instancia y devolver nada.
Menú de ayuda En estas funciones, uso la API del editor para moverme al encabezado de la lista de tareas actual, pasar a la lista siguiente o anterior y agregar el elemento a esa lista. La API es demasiado grande para describirla en este tutorial. Todos los documentos de la API son accesibles desde el Ayuda> Kit de desarrollo de software menú.
Kit de desarrollo de software los Documentación El enlace abrirá la documentación HTML en el navegador web predeterminado. los Ejecutar Editor el enlace comenzará FoldingText instancia con el depurador de código habilitado. los Ejecutar especificaciones El enlace ejecutará todas las especificaciones en FoldingText y cada una de sus extensiones..
En FoldingText terminología, una guión esta usando AppleScript inyectar un JavaScript funcionar en FoldingText realizar una acción. FoldingText añade dos palabras clave en su AppleScript diccionario: evaluar y depurar. Ambos evaluar y depurar Tomar un JavaScript y parámetros de entrada, pero evaluar lo ejecuta y devuelve el resultado mientras depurar inicia el script en la ventana del depurador.
Un buen ejemplo sería obtener una lista de etiquetas de la ventana superior. Abre el Editor de AppleScript con este código:
tell la aplicación "FoldingText" establece lstDocs en documentos si lstDocs ≠ y luego le dice al ítem 1 de lstDocs return (evalúe el script "function (editor) return editor.tree (). tags (true) .sort ();") end diga el final si el final dice
Esto le dice a la primera FoldingText documento para evaluar un JavaScript Función que acepta una instancia de editor. La función obtiene las etiquetas de FoldingText editor Objeto y los devuelve ordenados..
Guión para obtener etiquetas Cuando se ejecuta este script, el resultado son las etiquetas en el documento actual. Aquí el documento actual tiene las etiquetas. hecho y siguiente. Uso este script junto con otros en un flujo de trabajo de Alfred. Puede obtener el flujo de trabajo de la descarga de este artículo..
Una extensión para FoldingText Agrega nueva funcionalidad al editor. Sería muy bueno tener un bloque matemático que permita hacer algunos cálculos..
Crear una nueva extensión llamada imath.ftplugin. En el archivo package.json, agregue lo siguiente:
"name": "iMath Mode", "version": "1.0.0", "description": "Agrega el modo 'imath'", "homepage": "https://customct.com", "engines": "texto plegable": "> 2.0.0"
Esto da toda la información necesaria para describir la extensión..
Para hacer las matemáticas reales, el marco Math.js es excelente. Descarga esa biblioteca y colócala en el directorio con la main.js expediente.
En el main.js archivo, agregue este código:
// // Archivo: main.js // // Descripción: Este archivo define el modo matemático para FoldingText. Se // procesa las líneas matemáticas utilizando la biblioteca mathjs. // define (función (requiere, exporta, módulo) 'use strict'; // // Cargue las bibliotecas que necesito usar. // var Extensions = require ('ft / core / extensions'). Extensions; var math = require ("./ mathjs.js"); // // Agregue la extensión del modo 'math' al sistema. // Extensions.addMode (name: 'imath');); Esta extensión se inicia igual que la extensión de fragmentos. Después de obtener una referencia a la Extensiones biblioteca, exigir se utiliza para cargar el math.js biblioteca de la carpeta de extensiones. Cargar bibliotecas locales., exigir utiliza una ruta relativa al nombre completo del archivo de biblioteca.
Siguiente, Extensions.addMode () La función se utiliza para agregar un nuevo modo con el nombre imath. Esta función acepta una lista json con la tecla. nombre establecer el nombre de la nueva extensión: imath. Esto permite definir un bloque de texto que contiene matemáticas para el imath extensión para evaluar.
Se necesitan algunas funciones de ayuda. Agregue este código después de Extensions.addMode () función:
// // Función: inMathArea // // Descripción: esta función determina si el nodo actual está en // un área de matemáticas y no está vacío. // función inMathArea (node) if ((node.modeContext () === 'imath') && (node.text (). trim ()! = "")) return (true); else return (false); ; // // Función: Calcular // // Descripción: Esta función obtiene el nodo actual y el // contenido de la cadena del nodo actual. Devuelve el resultado del cálculo. // función Calculate (str) var result = 0, scope = ; intente // // Use la biblioteca de Mathjs para evaluar la ecuación. // var lines = str.substr (0, str.length - 2) .split ("\ n"); lines.forEach (función (línea) var nodo, código; código = mathjs.compile (línea); resultado = código.eval (alcance);); catch (e) // // Mathjs tuvo un problema con las expresiones. Devuelve un? // resultado = "?" + "-" + e.toString (); retorno (resultado); ; La función inMathArea () toma un nodo y determina si ese nodo está en un área de texto matemático llamando node.modeContext (). Como el procesamiento de líneas en blanco no genera nada, también verifica esa condición.
los Calcular() la función llamará al Math.js Biblioteca para evaluar la cadena dada. Si la biblioteca lanza una excepción, devuelve un signo de interrogación. La cadena a evaluar será la línea completa, excepto los dos últimos caracteres..
Lo último que debe hacer es conectarse a la rutina que se llama cada vez que el usuario cambia el texto. Añade estas líneas de código después de la Calcular() función:?
// // Función: ProcessPreviousNodes // // Descripción: Esta función escanea las líneas de imath anteriores que // no están ocultas. Las líneas ocultas se ignoran, pero // las líneas visibles se procesan para la matemática adecuada. // función ProcessPreviousNodes (node) var pnode = node, text = "", result = ""; while (pnode && (! pnode.mode ()) && (pnode.modeContext () === 'imath')) // // No es un encabezado, vea si tiene un comando de evaluación. // texto = 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 es así, procese la línea. // if (result.substr (-2) ==" => ") // // Vea si alguna de las líneas anteriores tenía // declaraciones de variables. // resultado = ProcessPreviousNodes (nodo) + "\ n" + resultado; // // Vea si otras áreas tienen definiciones de variables. // var pnode = node.parent.previousBranch (); while (pnode) if (pnode.modeContext () == = 'imath') if (! editor.nodeIsHiddenInFold (pnode) &&! editor.isCollapsed (pnode)) resultado = ProcessPreviousNodes (pnode.lastChild) + "\ n" + resultado; pnode.previousBranch () ; // // Calcule el resultado. Si Calcular devuelve una matriz, también se calcularon // las variables. Simplemente obtenga el resultado final. // var cresult = Calcular (resultado); if (isArray (cresult)) // // Obtendremos más que en respuesta. Por lo tanto, // simplemente obtenga el último resultado. // cresult = cresult [cresult.length - 1]; // // Ponga el resultado junto con la línea original. // resultado = node.text () + "" + cresult; // // Actualizar la línea. // node.setText (resultado); // // Agregar un TreeChan ged handler handler para averiguar cuándo ejecutar // un cálculo. // Extensions.addTreeChanged (función (editor, e) var deltas = e.deltas; para (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); ); los Extensions.addTreeChanged () La función se utiliza para enlazar a las rutinas de cambio de texto.. FoldingText mantiene una estructura de árbol de cada línea de texto en el documento. Cuando se cambia la estructura de árbol, se llamará a cada función registrada con la instancia del editor y una estructura de deltas.
La función recorre cada actualización delta y adición para determinar si está en el imath área usando el inMathArea () función. Si es y los dos últimos caracteres de la línea son =>, entonces el ProcessMathNode () se llama funcion los ProcessMathNode () La función llama a un par de funciones de ayuda para subir una copia de seguridad del documento para obtener cualquier información relevante. imath secciones.
Si una sección está oculta, entonces se ignora. De esa manera se pueden utilizar y evaluar diferentes escenarios. Una vez que todo relevante imath Se procesan las secciones, se da el conjunto a Calcular() Para evaluar los resultados. Los resultados se agregan al final de la línea con el espaciado adecuado y se envían de vuelta al árbol. La extensión matemática solo se calculará justo después de que el usuario escriba una =>.
Probando la extensión iMathUna vez que guarde el archivo, tendrá que volver a cargar FoldingText. Pruebe las líneas de arriba y vea los resultados. Solo recuerda: para volver a evaluar una expresión debes eliminar los resultados anteriores. El nuevo resultado será calculado y devuelto al documento..
FoldingText hace uso de Less.js para diseñar su interfaz de usuario. FoldingText Es realmente un navegador web sin toda la interfaz de usuario del navegador web.
Hay dos maneras de cambiar cómo FoldingText se ve: agregar Less.js declaraciones a la user.less archivo que es un directorio del directorio de complementos, o agregarlo a un style.less archivo en cualquier carpeta de plugin.
Por ejemplo, abra el Finder en la carpeta de complementos y suba un directorio. Allí, abre el user.less expediente. Ya verás:
// Este es tu usuario. Úselo para anular el estilo predeterminado. Cuando este // archivo se crea por primera vez, todas las líneas se comentan (comienza con //) y, por lo tanto, // no tiene ningún efecto en el estilo del editor. // Para cambiar la fuente, elimine el comentario de la siguiente línea: // @ fontFamily: Menlo; // Para cambiar el tamaño de fuente, elimine el comentario de la siguiente línea: // @ fontSize: 10pt; // Para cambiar el color de "tinta" de la base (usado para texto), elimine el comentario de la siguiente // línea: // @ inkColor: negro; // Para cambiar el color de "papel" de la base (detrás del texto), elimine el comentario de la siguiente // línea: // @ paperColor: blanco; // Color usado para indicar algo. Como cuando el ratón está sobre un enlace. // @ indicadoColor: azul;
Estos son algunos de los valores predeterminados que puede cambiar. Prefiero texto más grande, así que elimine el indicador de comentarios para el @tamaño de fuente variable y configurarlo para 12 puntos. Cuando guardas y recargas FoldingText, todo el texto se basará en 12 puntos tamaño.
Si hay algo que desea cambiar que no aparece en el archivo, abra el Depurador para navegar por el DOM. Encuentre lo que desea, obtenga su ID y cámbielo en el Less.js expediente.
Al hacer todas estas extensiones, necesitará depurar su código o navegar por el DOM para encontrar lo que necesita cambiar. FoldingText hace que sea muy fácil.
El depurador Cuando selecciona la Ejecutar Editor enlace en el Kit de desarrollo de software, obtienes el FoldingText Editor con controles para la depuración. Seleccionando el Inspector En la barra de herramientas se muestra el estándar. Safari herramientas de desarrollo. Esto le da todas las herramientas que necesitará para depurar cualquier cosa en FoldingText. Puedes revisar Guía del desarrollador de Apple Safari para obtener información sobre el uso de las herramientas de desarrollo.
En este tutorial, he mostrado cómo crear fragmentos de código, métodos abreviados de teclado, comandos, scripts, extensiones y temas para FoldingText. Dado que todo está basado en la tecnología de navegador web, la curva de aprendizaje es fácil. Con toda la riqueza de JavaScript bibliotecas disponibles, casi no hay límite a lo que puede hacer con FoldingText.
