hand Inicio

SERVICIOS

Salir

nochedía

DESARROLLO WEB con
GATSBY y WORDPRESS

emoji Cursos [24]
emoji Themes Gatsby [5]
emoji Themes WordPress [2]
emoji Blog [83]
emoji Herramientas [11]

Escoger la mejor fuente para programar (visual studio code)

300 palabras
1 minutos
June 6, 2020
blogvscodecss

Te hablo de las fuentes más populares para programar y de las páginas que nos permiten explorarlas

  1. 4 recursos y una muestra para encontrar tu fuente preferida
  2. Una muestra in-situ

4 recursos y una muestra para encontrar tu fuente preferida

Programar requiere un entorno físico concreto, y un entorno digital concreto. Como en toda tarea, necesitas de cierto equilibrio y orden para poder trabajar a gusto

Esto, si nos paramos a hablar del posiblemente mejor editor del momento, el VSCODE, se traduce sobre todo a elegir el tema y la fuente

Tampoco es que haga falta, lo que ya te viene por defecto ya nos sirve, pero nunca está de más explorar otras opciones

Qué nos ofrece por defecto vscode? Esto

js
// Controls the font family.
"editor.fontFamily": "Consolas, 'Courier New', monospace",

Pero esto es para Windows donde Consolas está desde siempre

Para los otros sistemas operativos lo tienes aquí (stackoverflow)

js
const DEFAULT_WINDOWS_FONT_FAMILY = "Consolas, 'Courier New', monospace"
const DEFAULT_MAC_FONT_FAMILY = "Menlo, Monaco, 'Courier New', monospace"
const DEFAULT_LINUX_FONT_FAMILY = "'Droid Sans Mono', 'monospace', monospace, 'Droid Sans Fallback'"

Y qué otras opciones tenemos?

De fuentes, muchas, y de páginas que nos permiten explorar esas fuentes en un contexto de programación, bastantes

Si te interesa, tienes la página de recursos donde voy añadiendo los recursos más útiles que me encuentro por la red

Y si lo que quieres es ver fuentes, aquí y aquí tienes 2 herramientas kuworking

Y si quieres saber más de los temas, tengo una entrada aquí

Y para más entradas relacionadas con vscode, tienes la categoría del blog aquí

Programming Fonts

Una página fantástica, programmingfonts.org, donde podemos provar in-situ las fuentes listadas, más de 98 fuentes gratis y libres (y con su github)

Free Programming Fonts

Una recopilación de las mejores fuentes que tenemos para programar, mostrada de la manera más útil posible, esto es, un simple párrafo con la fuente aplicada

Lo tienes aquí y también con su github

Coding horror

Tienes lo mismo con Coding horror, una recopilatorio con código y la fuente de ejemplo

Reseñas

No hay más recursos en formato de herramienta o lista como las anteriores (si sabes de alguna, escríbeme!), pero lo que sí hay son reseñas de páginas con reputación más que contrastada

Una muestra in-situ

Y para muestra, un botón, aquí tienes las fuentes más populares (y gratis) siguiendo el ejemplo de antes: un simple párrafo con la fuente aplicada al mismo

Anonymous Pro

js
<Highlight {...defaultProps} theme={kuworkingPrismTheme} code={children.trim()} language={language}>
{({ className, style, tokens, getLineProps, getTokenProps }) => (
<div>
<Badge>
<div>{language}</div>
</Badge>
<pre className={className} style={{ ...style, padding: '20px' }}>
{tokens.map((line, i) => {
const { className, ...lineProps } = getLineProps({ line, key: i })
const class_name = (lines && (highlighted_lines.includes(i) ? 'emphasized' : '')) || ''
return (
<div className={`${className} ${class_name}`} key={i} {...lineProps}>
{line.map((token, key) => (
<span key={key} {...getTokenProps({ token, key })} />
))}
</div>
)
})}
</pre>
</div>
)}
</Highlight>

Cousine

js
<Highlight {...defaultProps} theme={kuworkingPrismTheme} code={children.trim()} language={language}>
{({ className, style, tokens, getLineProps, getTokenProps }) => (
<div>
<Badge>
<div>{language}</div>
</Badge>
<pre className={className} style={{ ...style, padding: '20px' }}>
{tokens.map((line, i) => {
const { className, ...lineProps } = getLineProps({ line, key: i })
const class_name = (lines && (highlighted_lines.includes(i) ? 'emphasized' : '')) || ''
return (
<div className={`${className} ${class_name}`} key={i} {...lineProps}>
{line.map((token, key) => (
<span key={key} {...getTokenProps({ token, key })} />
))}
</div>
)
})}
</pre>
</div>
)}
</Highlight>

Fira Mono

js
<Highlight {...defaultProps} theme={kuworkingPrismTheme} code={children.trim()} language={language}>
{({ className, style, tokens, getLineProps, getTokenProps }) => (
<div>
<Badge>
<div>{language}</div>
</Badge>
<pre className={className} style={{ ...style, padding: '20px' }}>
{tokens.map((line, i) => {
const { className, ...lineProps } = getLineProps({ line, key: i })
const class_name = (lines && (highlighted_lines.includes(i) ? 'emphasized' : '')) || ''
return (
<div className={`${className} ${class_name}`} key={i} {...lineProps}>
{line.map((token, key) => (
<span key={key} {...getTokenProps({ token, key })} />
))}
</div>
)
})}
</pre>
</div>
)}
</Highlight>

Inconsolata

js
<Highlight {...defaultProps} theme={kuworkingPrismTheme} code={children.trim()} language={language}>
{({ className, style, tokens, getLineProps, getTokenProps }) => (
<div>
<Badge>
<div>{language}</div>
</Badge>
<pre className={className} style={{ ...style, padding: '20px' }}>
{tokens.map((line, i) => {
const { className, ...lineProps } = getLineProps({ line, key: i })
const class_name = (lines && (highlighted_lines.includes(i) ? 'emphasized' : '')) || ''
return (
<div className={`${className} ${class_name}`} key={i} {...lineProps}>
{line.map((token, key) => (
<span key={key} {...getTokenProps({ token, key })} />
))}
</div>
)
})}
</pre>
</div>
)}
</Highlight>

Oxygen Mono

js
<Highlight {...defaultProps} theme={kuworkingPrismTheme} code={children.trim()} language={language}>
{({ className, style, tokens, getLineProps, getTokenProps }) => (
<div>
<Badge>
<div>{language}</div>
</Badge>
<pre className={className} style={{ ...style, padding: '20px' }}>
{tokens.map((line, i) => {
const { className, ...lineProps } = getLineProps({ line, key: i })
const class_name = (lines && (highlighted_lines.includes(i) ? 'emphasized' : '')) || ''
return (
<div className={`${className} ${class_name}`} key={i} {...lineProps}>
{line.map((token, key) => (
<span key={key} {...getTokenProps({ token, key })} />
))}
</div>
)
})}
</pre>
</div>
)}
</Highlight>

Source Code Pro

js
<Highlight {...defaultProps} theme={kuworkingPrismTheme} code={children.trim()} language={language}>
{({ className, style, tokens, getLineProps, getTokenProps }) => (
<div>
<Badge>
<div>{language}</div>
</Badge>
<pre className={className} style={{ ...style, padding: '20px' }}>
{tokens.map((line, i) => {
const { className, ...lineProps } = getLineProps({ line, key: i })
const class_name = (lines && (highlighted_lines.includes(i) ? 'emphasized' : '')) || ''
return (
<div className={`${className} ${class_name}`} key={i} {...lineProps}>
{line.map((token, key) => (
<span key={key} {...getTokenProps({ token, key })} />
))}
</div>
)
})}
</pre>
</div>
)}
</Highlight>

Ubuntu Mono

js
<Highlight {...defaultProps} theme={kuworkingPrismTheme} code={children.trim()} language={language}>
{({ className, style, tokens, getLineProps, getTokenProps }) => (
<div>
<Badge>
<div>{language}</div>
</Badge>
<pre className={className} style={{ ...style, padding: '20px' }}>
{tokens.map((line, i) => {
const { className, ...lineProps } = getLineProps({ line, key: i })
const class_name = (lines && (highlighted_lines.includes(i) ? 'emphasized' : '')) || ''
return (
<div className={`${className} ${class_name}`} key={i} {...lineProps}>
{line.map((token, key) => (
<span key={key} {...getTokenProps({ token, key })} />
))}
</div>
)
})}
</pre>
</div>
)}
</Highlight>

Open Sans

js
<Highlight {...defaultProps} theme={kuworkingPrismTheme} code={children.trim()} language={language}>
{({ className, style, tokens, getLineProps, getTokenProps }) => (
<div>
<Badge>
<div>{language}</div>
</Badge>
<pre className={className} style={{ ...style, padding: '20px' }}>
{tokens.map((line, i) => {
const { className, ...lineProps } = getLineProps({ line, key: i })
const class_name = (lines && (highlighted_lines.includes(i) ? 'emphasized' : '')) || ''
return (
<div className={`${className} ${class_name}`} key={i} {...lineProps}>
{line.map((token, key) => (
<span key={key} {...getTokenProps({ token, key })} />
))}
</div>
)
})}
</pre>
</div>
)}
</Highlight>

Roboto

js
<Highlight {...defaultProps} theme={kuworkingPrismTheme} code={children.trim()} language={language}>
{({ className, style, tokens, getLineProps, getTokenProps }) => (
<div>
<Badge>
<div>{language}</div>
</Badge>
<pre className={className} style={{ ...style, padding: '20px' }}>
{tokens.map((line, i) => {
const { className, ...lineProps } = getLineProps({ line, key: i })
const class_name = (lines && (highlighted_lines.includes(i) ? 'emphasized' : '')) || ''
return (
<div className={`${className} ${class_name}`} key={i} {...lineProps}>
{line.map((token, key) => (
<span key={key} {...getTokenProps({ token, key })} />
))}
</div>
)
})}
</pre>
</div>
)}
</Highlight>

Noto Sans

js
<Highlight {...defaultProps} theme={kuworkingPrismTheme} code={children.trim()} language={language}>
{({ className, style, tokens, getLineProps, getTokenProps }) => (
<div>
<Badge>
<div>{language}</div>
</Badge>
<pre className={className} style={{ ...style, padding: '20px' }}>
{tokens.map((line, i) => {
const { className, ...lineProps } = getLineProps({ line, key: i })
const class_name = (lines && (highlighted_lines.includes(i) ? 'emphasized' : '')) || ''
return (
<div className={`${className} ${class_name}`} key={i} {...lineProps}>
{line.map((token, key) => (
<span key={key} {...getTokenProps({ token, key })} />
))}
</div>
)
})}
</pre>
</div>
)}
</Highlight>

Lato

js
<Highlight {...defaultProps} theme={kuworkingPrismTheme} code={children.trim()} language={language}>
{({ className, style, tokens, getLineProps, getTokenProps }) => (
<div>
<Badge>
<div>{language}</div>
</Badge>
<pre className={className} style={{ ...style, padding: '20px' }}>
{tokens.map((line, i) => {
const { className, ...lineProps } = getLineProps({ line, key: i })
const class_name = (lines && (highlighted_lines.includes(i) ? 'emphasized' : '')) || ''
return (
<div className={`${className} ${class_name}`} key={i} {...lineProps}>
{line.map((token, key) => (
<span key={key} {...getTokenProps({ token, key })} />
))}
</div>
)
})}
</pre>
</div>
)}
</Highlight>

Montserrat

js
<Highlight {...defaultProps} theme={kuworkingPrismTheme} code={children.trim()} language={language}>
{({ className, style, tokens, getLineProps, getTokenProps }) => (
<div>
<Badge>
<div>{language}</div>
</Badge>
<pre className={className} style={{ ...style, padding: '20px' }}>
{tokens.map((line, i) => {
const { className, ...lineProps } = getLineProps({ line, key: i })
const class_name = (lines && (highlighted_lines.includes(i) ? 'emphasized' : '')) || ''
return (
<div className={`${className} ${class_name}`} key={i} {...lineProps}>
{line.map((token, key) => (
<span key={key} {...getTokenProps({ token, key })} />
))}
</div>
)
})}
</pre>
</div>
)}
</Highlight>

PT Mono

js
<Highlight {...defaultProps} theme={kuworkingPrismTheme} code={children.trim()} language={language}>
{({ className, style, tokens, getLineProps, getTokenProps }) => (
<div>
<Badge>
<div>{language}</div>
</Badge>
<pre className={className} style={{ ...style, padding: '20px' }}>
{tokens.map((line, i) => {
const { className, ...lineProps } = getLineProps({ line, key: i })
const class_name = (lines && (highlighted_lines.includes(i) ? 'emphasized' : '')) || ''
return (
<div className={`${className} ${class_name}`} key={i} {...lineProps}>
{line.map((token, key) => (
<span key={key} {...getTokenProps({ token, key })} />
))}
</div>
)
})}
</pre>
</div>
)}
</Highlight>

Nova Mono

js
<Highlight {...defaultProps} theme={kuworkingPrismTheme} code={children.trim()} language={language}>
{({ className, style, tokens, getLineProps, getTokenProps }) => (
<div>
<Badge>
<div>{language}</div>
</Badge>
<pre className={className} style={{ ...style, padding: '20px' }}>
{tokens.map((line, i) => {
const { className, ...lineProps } = getLineProps({ line, key: i })
const class_name = (lines && (highlighted_lines.includes(i) ? 'emphasized' : '')) || ''
return (
<div className={`${className} ${class_name}`} key={i} {...lineProps}>
{line.map((token, key) => (
<span key={key} {...getTokenProps({ token, key })} />
))}
</div>
)
})}
</pre>
</div>
)}
</Highlight>

Bellota Text

js
<Highlight {...defaultProps} theme={kuworkingPrismTheme} code={children.trim()} language={language}>
{({ className, style, tokens, getLineProps, getTokenProps }) => (
<div>
<Badge>
<div>{language}</div>
</Badge>
<pre className={className} style={{ ...style, padding: '20px' }}>
{tokens.map((line, i) => {
const { className, ...lineProps } = getLineProps({ line, key: i })
const class_name = (lines && (highlighted_lines.includes(i) ? 'emphasized' : '')) || ''
return (
<div className={`${className} ${class_name}`} key={i} {...lineProps}>
{line.map((token, key) => (
<span key={key} {...getTokenProps({ token, key })} />
))}
</div>
)
})}
</pre>
</div>
)}
</Highlight>

Comfortaa

js
<Highlight {...defaultProps} theme={kuworkingPrismTheme} code={children.trim()} language={language}>
{({ className, style, tokens, getLineProps, getTokenProps }) => (
<div>
<Badge>
<div>{language}</div>
</Badge>
<pre className={className} style={{ ...style, padding: '20px' }}>
{tokens.map((line, i) => {
const { className, ...lineProps } = getLineProps({ line, key: i })
const class_name = (lines && (highlighted_lines.includes(i) ? 'emphasized' : '')) || ''
return (
<div className={`${className} ${class_name}`} key={i} {...lineProps}>
{line.map((token, key) => (
<span key={key} {...getTokenProps({ token, key })} />
))}
</div>
)
})}
</pre>
</div>
)}
</Highlight>

Balsamiq Sans

js
<Highlight {...defaultProps} theme={kuworkingPrismTheme} code={children.trim()} language={language}>
{({ className, style, tokens, getLineProps, getTokenProps }) => (
<div>
<Badge>
<div>{language}</div>
</Badge>
<pre className={className} style={{ ...style, padding: '20px' }}>
{tokens.map((line, i) => {
const { className, ...lineProps } = getLineProps({ line, key: i })
const class_name = (lines && (highlighted_lines.includes(i) ? 'emphasized' : '')) || ''
return (
<div className={`${className} ${class_name}`} key={i} {...lineProps}>
{line.map((token, key) => (
<span key={key} {...getTokenProps({ token, key })} />
))}
</div>
)
})}
</pre>
</div>
)}
</Highlight>

Pompiere

js
<Highlight {...defaultProps} theme={kuworkingPrismTheme} code={children.trim()} language={language}>
{({ className, style, tokens, getLineProps, getTokenProps }) => (
<div>
<Badge>
<div>{language}</div>
</Badge>
<pre className={className} style={{ ...style, padding: '20px' }}>
{tokens.map((line, i) => {
const { className, ...lineProps } = getLineProps({ line, key: i })
const class_name = (lines && (highlighted_lines.includes(i) ? 'emphasized' : '')) || ''
return (
<div className={`${className} ${class_name}`} key={i} {...lineProps}>
{line.map((token, key) => (
<span key={key} {...getTokenProps({ token, key })} />
))}
</div>
)
})}
</pre>
</div>
)}
</Highlight>

Neucha

js
<Highlight {...defaultProps} theme={kuworkingPrismTheme} code={children.trim()} language={language}>
{({ className, style, tokens, getLineProps, getTokenProps }) => (
<div>
<Badge>
<div>{language}</div>
</Badge>
<pre className={className} style={{ ...style, padding: '20px' }}>
{tokens.map((line, i) => {
const { className, ...lineProps } = getLineProps({ line, key: i })
const class_name = (lines && (highlighted_lines.includes(i) ? 'emphasized' : '')) || ''
return (
<div className={`${className} ${class_name}`} key={i} {...lineProps}>
{line.map((token, key) => (
<span key={key} {...getTokenProps({ token, key })} />
))}
</div>
)
})}
</pre>
</div>
)}
</Highlight>

Indie Flower

js
<Highlight {...defaultProps} theme={kuworkingPrismTheme} code={children.trim()} language={language}>
{({ className, style, tokens, getLineProps, getTokenProps }) => (
<div>
<Badge>
<div>{language}</div>
</Badge>
<pre className={className} style={{ ...style, padding: '20px' }}>
{tokens.map((line, i) => {
const { className, ...lineProps } = getLineProps({ line, key: i })
const class_name = (lines && (highlighted_lines.includes(i) ? 'emphasized' : '')) || ''
return (
<div className={`${className} ${class_name}`} key={i} {...lineProps}>
{line.map((token, key) => (
<span key={key} {...getTokenProps({ token, key })} />
))}
</div>
)
})}
</pre>
</div>
)}
</Highlight>

Encode Sans

js
<Highlight {...defaultProps} theme={kuworkingPrismTheme} code={children.trim()} language={language}>
{({ className, style, tokens, getLineProps, getTokenProps }) => (
<div>
<Badge>
<div>{language}</div>
</Badge>
<pre className={className} style={{ ...style, padding: '20px' }}>
{tokens.map((line, i) => {
const { className, ...lineProps } = getLineProps({ line, key: i })
const class_name = (lines && (highlighted_lines.includes(i) ? 'emphasized' : '')) || ''
return (
<div className={`${className} ${class_name}`} key={i} {...lineProps}>
{line.map((token, key) => (
<span key={key} {...getTokenProps({ token, key })} />
))}
</div>
)
})}
</pre>
</div>
)}
</Highlight>

Annie Use Your Telescope

js
<Highlight {...defaultProps} theme={kuworkingPrismTheme} code={children.trim()} language={language}>
{({ className, style, tokens, getLineProps, getTokenProps }) => (
<div>
<Badge>
<div>{language}</div>
</Badge>
<pre className={className} style={{ ...style, padding: '20px' }}>
{tokens.map((line, i) => {
const { className, ...lineProps } = getLineProps({ line, key: i })
const class_name = (lines && (highlighted_lines.includes(i) ? 'emphasized' : '')) || ''
return (
<div className={`${className} ${class_name}`} key={i} {...lineProps}>
{line.map((token, key) => (
<span key={key} {...getTokenProps({ token, key })} />
))}
</div>
)
})}
</pre>
</div>
)}
</Highlight>
Qué tal la entrada?
👌 Bien 🙌🙌
👍 Bien, pero algunas cosas podrían explicarse mejor 😬
🤷‍♂️ Da por sentadas demasiadas cosas 😒
🤷‍♂️ A ver, hay poca chicha 😬
🤷‍♂️ Los ejemplos no son muy claros 🙇‍♂️
🤷‍♂️ No se entiende, está mal escrito 👎
✍️ Hay errores, revísalo en cuanto puedas 🙏

Más entradas

Privacidad
by kuworking.com
[ 2020 >> kuworking ]