Cómo usar una fuente personalizada (monoespaciada) en Ace Editor

Cómo usar una fuente personalizada (monoespaciada) en Ace Editor

He estado trabajando durante un par de semanas en una nueva aplicación que publicaré pronto en la Play Store. Es básicamente un editor de código que usa el editor Ace bajo cuerdas. En la lista de características que me gustaría implementar está la de permitirle al usuario elegir una fuente personalizada de una lista en el editor, así que investigué y terminé implementándola con bastante facilidad.

En este breve artículo, te explicaré cómo usar fácilmente una fuente monoespaciada personalizada en tu instancia de editor Ace con JavaScript.

Importante

Solo las fuentes monoespaciadas funcionan correctamente, si usas otro tipo de fuentes, el cursor aparecerá siempre en el lugar equivocado.

1. Definir tipo de letra

En este caso, vamos a utilizar la fuente JetBrains Mono, una tipografía especialmente diseñada para desarrolladores. Puedes visitar el repositorio oficial de la fuente para obtener más información. La siguiente regla CSS define la familia de fuente JetBrains Mono que nuestro editor podra usar más adelante:

/* https://github.com/JetBrains/JetBrainsMono */
@font-face{
    font-family: 'JetBrains Mono';
    src: url('https://yourwebsite.com/fonts/JetBrainsMono-Regular.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}

Como puedes ver, la regla es CSS normal, por lo que puedes incrustar la fuente que desees y la familia de fuentes que necesitas (siempre y cuando sea monoespaciada).

2. Utiliza una nueva familia de fuentes

Ahora todo lo que necesitas hacer es especificar en las opciones la nueva familia de fuentes que debe usarse en el editor a través de los métodos setOption setOptions:

var editor = ace.edit("editor");
editor.setTheme("ace/theme/monokai");
editor.session.setMode("ace/mode/javascript");

// Usar fuente personalizada
editor.setOptions({
    fontFamily: "JetBrains Mono",
    fontSize: "16px"
});

Recuerda que este tutorial debería funcionar para cualquier fuente que desees. Te recomiendo que visites esta fabulosa colección de fuentes para desarrolladores que puedes implementar en tu proyecto.

Que te diviertas ❤️!

Esto podria interesarte

Conviertete en un programador más sociable