{"id":316,"date":"2026-11-13T09:15:07","date_gmt":"2026-11-13T09:15:07","guid":{"rendered":"https:\/\/joanruedapauweb.com\/blog\/?p=316"},"modified":"2026-11-13T09:34:28","modified_gmt":"2026-11-13T09:34:28","slug":"una-q-de-quake-en-mi-editor","status":"publish","type":"post","link":"https:\/\/joanruedapauweb.com\/blog\/index.php\/2026\/11\/13\/una-q-de-quake-en-mi-editor\/","title":{"rendered":"Una Q de Quake en mi editor"},"content":{"rendered":"\n

C\u00f3mo hice Quake Q, una extensi\u00f3n de Visual Studio Code que dibuja la letra Q como el logo de Quake 1 sin cambiar ni un car\u00e1cter del texto.<\/em><\/h1>\n\n\n\n

https:\/\/github.com\/cefaloide\/quake-vscode<\/a><\/p>\n\n\n

\n
\"\"<\/figure>\n<\/div>\n\n\n
\"\"<\/a><\/figure>\n\n\n\n
\n\n\n\n

La idea<\/h2>\n\n\n\n

Quake (1996) es uno de esos juegos que se te quedan grabados, y su logo tambi\u00e9n: un anillo abierto por arriba atravesado por un clavo. Un d\u00eda pens\u00e9 que me gustar\u00eda ver ese logo cada vez que escribo una Q en el editor. Solo esa letra; el resto del c\u00f3digo ten\u00eda que seguir igual.<\/p>\n\n\n\n

Parec\u00eda tan f\u00e1cil como cambiar una fuente, pero no lo era.<\/p>\n\n\n\n

El problema: VS Code no deja cambiar la fuente de una sola letra<\/h2>\n\n\n\n

En VS Code, editor.fontFamily<\/code> se aplica a todo el editor, y la API de extensiones no tiene nada parecido a \u00abesta letra, con esta fuente\u00bb.<\/p>\n\n\n\n

Lo que s\u00ed ofrece son las decoraciones<\/strong> (createTextEditorDecorationType<\/code>). Son las mismas que usan los linters para subrayar errores o GitLens para anotar l\u00edneas. Con ellas puedes cambiar el color, el fondo o el borde de un trozo de texto, y a\u00f1adir contenido antes o despu\u00e9s de \u00e9l (before<\/code> y after<\/code>), incluida una imagen.<\/p>\n\n\n\n

Con eso hab\u00eda dos caminos:<\/p>\n\n\n\n

    \n
  1. Inyectar CSS.<\/strong> El valor de la propiedad textDecoration<\/code> acaba tal cual en el CSS del editor. Por eso, si escribes none; font-family: 'DpQuake'<\/code>, se cuela una regla font-family<\/code>. Funciona, pero es un truco no documentado y solo sirve si tienes una fuente de Quake instalada. Lo dej\u00e9 como modo opcional (quakeQ.fontFamily<\/code>).<\/li>\n\n\n\n
  2. Dibujar encima.<\/strong> Hacer la letra transparente y pintar una imagen en su sitio. No depende de ninguna fuente instalada, as\u00ed que es el modo por defecto.<\/li>\n<\/ol>\n\n\n\n

    C\u00f3mo funciona por dentro<\/h2>\n\n\n\n

    1. Una decoraci\u00f3n que esconde la letra<\/h3>\n\n\n\n

    El primer paso es una decoraci\u00f3n que vuelve transparente la letra:<\/p>\n\n\n\n

    vscode.window.createTextEditorDecorationType({\n  color: 'transparent',\n  rangeBehavior: vscode.DecorationRangeBehavior.ClosedClosed\n});\n<\/code><\/pre>\n\n\n\n
    El car\u00e1cter sigue ah\u00ed. El cursor, la selecci\u00f3n, la b\u00fasqueda y el copiar y pegar funcionan exactamente igual; la letra solo deja de verse.<\/p>\n\n\n\n
    La q<\/code> y la Q<\/code> comparten el mismo tipo de decoraci\u00f3n. La imagen de cada una se elige por rango con renderOptions<\/code>.<\/p>\n\n\n\n
    2. Una imagen que no ocupa sitio<\/h3>\n\n\n\n
    Encima de la letra transparente se pinta la imagen con un before<\/code>:<\/p>\n\n\n\n
    before: {\n  contentIconPath: svgUri,\n  width: `${width}px`,\n  height: `${lineHeight}px`,\n  margin: `0 -${width - overhang}px 0 -${overhang}px`,\n  textDecoration: 'none; vertical-align: top; pointer-events: none'\n}\n<\/code><\/pre>\n\n\n\n
    Un before<\/code> normal empujar\u00eda el texto hacia la derecha. El truco est\u00e1 en los m\u00e1rgenes negativos:<\/p>\n\n\n\n