A $ o no a $: visualización de fragmentos de código de terminal

Es muy popular poner $líneas que pretenden ser un comando en la documentación del código que involucra la terminal (es decir, la línea de comando).

Como esto:

$ brew install somepackage

El punto de esto es que imita el mensaje que usted (puede) ver en su línea de comando. Aquí está el mío:

Entonces, el signo de dólar ( $) es una pequeña técnica que la gente usa para indicar que esta línea de código debe ejecutarse en la línea de comando.

problema menor

El problema con esto es que yo (y apuesto a que la mayoría de las personas también) copiaré y pegaré comandos como ese de esa documentación.

Si ejecuta ese comando anterior en mi terminal exactamente como está escrito…

… It doesn't work . $no es una orden. ¿Cómo tratas con esto? Sólo tienes que saberlo. Sólo necesita haber tenido este problema antes y haber aprendido de alguna manera que lo que la documentación realmente le dice es que ejecutar el comando brew install somepackage(sin el signo de dólar) en la línea de comando.

Digo problemas menores porque hay todo tipo de cosas como ésta en todos los trabajos del mundo. Cuando pongo algo como font-size: 2.2remen una publicación de blog, no digo también: “Ponga esa declaración en un conjunto de reglas en un archivo CSS al que se vincula su archivo HTML”. Sólo tienes que saber esas cosas.

Arreglarlo con CSS

El hecho de que sea sólo un problema menor y que la tecnología esté cargada de cosas que sólo necesitas saber no significa que no podamos intentar solucionarlo y hacerlo un poco mejor.

La idea de esta publicación surgió de este tweet que obtuvo muchos más Me gusta de los que pensé:

Si realmente cree que es más comprensible poner $ en documentos para comandos de terminal, por ejemplo,

$ preparar instalar buttnugget,

entonces un toque de UX es:

code.command::antes {
contenido: “$ “;
}

para no copiarlo cuando copie el comando y falla en la terminal real.

– Chris Coyier (@chriscoyier) 5 de mayo de 2021

Para ampliar eso, espero que probablemente estés marcando tus documentos de alguna manera como:

pInstall package like:/pprecodebrew install package/code/pre

Ahora puedes insertar $ como un pseudoelemento en lugar de como texto real:

code.command::before {  content: "$ ";}

Ahora no solo se está guardando un carácter en el HTML, que $no se puede seleccionar, porque así es como funcionan los pseudoelementos . Ahora estás un poco mejor en el departamento de UX. Incluso si el usuario hace doble clic en la línea o intenta seleccionarla toda, no se equivocará $al copiar y pegar.

Esperamos que no se sientan igualmente frustrados por no poder copiar el archivo $.

Entonces, de todos modos, algo como este increíble diseño mío:

Arreglarlo con texto

Mucha documentación sobre códigos se encuentra en un lugar público de repositorio de git como GitHub. No tienes acceso a CSS para diseñar el aspecto de GitHub, por lo que, si bien hay trucos disponibles, no puedes simplemente colocar una línea de CSS allí para diseñar cosas.

Quizás tengamos que (jadear) usar nuestras palabras:

p  Install the package by entering this   command at your terminal:/pkbdbrew install package/kbd

Otros pensamientos

• Probablemente no te molestarías en resaltar la sintaxis en absoluto. No creo haber visto nunca una terminal cuya sintaxis resalte los comandos a medida que los ingresa.
• Eric Meyer sugirió el kbdelemento que es el elemento de entrada del teclado. Me gusta eso. Lo he usado durante mucho tiempo codepero creo que kbdes más apropiado aquí.
• Tim Chase sugirió usar spane incluir el mensaje en el HTML para que pueda darle un estilo único si lo desea, incluso hacer que no se pueda seleccionar con user-select: none;.
• Justin Searls tiene un truco para los archivos de puntos en el que, si accidentalmente copia/pega el archivo $, simplemente lo ignora y ejecuta todo lo que sigue.
• Jackson Bates sugiere tener mucho cuidado con lo que copia y pega en una terminal.
• Aprendí que $también es una forma de indicar comandos "sin privilegios", mientras que # es para comandos raíz. Parte de esa razón es que si copia y pega un comando raíz, no se ejecutará ya que será reconocido como un comentario.