Markdown por ejemplo

    Como todos sabemos, HTML existe desde hace mucho tiempo y se utiliza para crear todos los sitios web en Internet, pero en realidad no es tan fácil de escribir. Claro, para muchos desarrolladores puede ser fácil, pero definitivamente no es conveniente gracias a la sintaxis detallada. Si eres un blogger, realmente no hay ninguna razón para tener que escribir HTML, ya que probablemente solo necesites un formato simple como énfasis y enlaces.

    Aquí es donde Reducción entra en juego. En este artículo, explicaré qué es y, lo que es más importante, le mostraré algunos ejemplos de Markdown que puede usar por su cuenta.

    ¬ŅQu√© es Markdown?

    Markdown es un lenguaje de marcado muy ligero que le permite crear texto enriquecido (es decir, texto que tiene énfasis, encabezados, etc.) en cualquier editor de texto sin formato. Markdown, como HTML, le permite especificar el formato de texto, pero es mucho menos expresivo que HTML, lo cual está perfectamente bien ya que solo está destinado a formatear texto y no crear páginas web completas.

    El Markdown resultante que escribe se alimenta a un convertidor que reemplaza la sintaxis de Markdown con HTML, que luego se puede mostrar en una p√°gina web. Adem√°s de la sintaxis de Markdown, tambi√©n puede escribir HTML sin formato, por lo que si tiene una estructura m√°s complicada que desea agregar en l√≠nea con su texto, a√ļn podr√° hacerlo.

    John Gruber cre√≥ la sintaxis Markdown con Aaron Swartz en 2004 como una forma de “escribir usando un formato de texto plano f√°cil de leer y escribir, y opcionalmente convertirlo a XHTML (o HTML) estructuralmente v√°lido”.

    Parece haber logrado su objetivo, pero ha habido problemas con Estandarizaci√≥n ya que no hay un est√°ndar claramente definido que no sea la documentaci√≥n inicial de Gruber. Debido a esto, ha habido algunos problemas de fragmentaci√≥n con los convertidores, aunque muchos de ellos est√°n de acuerdo en la mayor√≠a de la sintaxis, todav√≠a hay bastantes sabores diferentes all√≠ afuera. A lo largo de este art√≠culo, nos ce√Īiremos lo m√°s posible a la implementaci√≥n original y notaremos cuando describo una funci√≥n que no es totalmente compatible.

    Ejemplos de sintaxis de Markdown

    Los ejemplos se dividirán en dos secciones diferentes, elementos de bloque y elementos de tramo. Los elementos de bloque son aquellos que ocupan su propia línea, como párrafos, código o encabezados.

    Los elementos de extensión se pueden usar en línea, lo que significa que se pueden usar dentro de un párrafo y no es necesario que estén en una línea propia.

    Elementos de bloque

    Párrafos y nuevas líneas

    La creación de párrafos y nuevas líneas (o saltos de línea) es similar, pero tiene diferencias sutiles. Un nuevo elemento de párrafo, <p>...</p>, se crea cada vez que hay una línea en blanco entre dos líneas de texto. Me gusta esto:

    Reducción:

    Hello, this is a paragraph.
    
    OMG, this is a new paragraph, you guys.
    

    HTML:

    <p>Hello, this is a paragraph.</p>
    <p>OMG, this is a new paragraph, you guys.</p>
    

    Por otro lado, un salto de línea, <br /> se inserta cuando hay una nueva línea y no hay una línea en blanco que separe el texto, así:

    Reducción:

    The paragraph starts here...
    ...and doesn't end until here.
    

    HTML:

    <p>The paragraph starts here...<br />
    ...and doesn't end until here.</p>
    
    Encabezados

    Hay dos formas de crear encabezados, Setext y atx. El m√©todo que elija se basar√° en sus preferencias personales y en el tama√Īo del encabezado que necesite.

    Para declarar encabezados H1 o H2 en el formato Setext, puede usar subrayados:

    An H1 Header
    ============
    
    An H2 Header
    ------------
    

    Tenga en cuenta que no importa el n√ļmero de “=” o “-” que utilice. Incluso colocar solo uno de estos caracteres debajo del texto le indicar√° a Markdown que cree el encabezado.

    En cuanto al m√©todo atx, todo lo que necesita hacer es colocar signos de libra (#) antes del texto. El n√ļmero de signos de libra que utiliza determina la etiqueta de encabezado utilizada (hasta h6).

    # An H1 Header
    ## An H2 Header
    ### An H3 Header
    #### An H4 Header
    

    Opcionalmente, puede agregar el signo de almohadilla después del texto del encabezado, pero sería por razones puramente estéticas. Ni siquiera necesita hacer coincidir la cantidad de símbolos en el prefijo:

    # An H1 Header #
    ## Still an H2 Header ####
    ### An H3 Header
    
    Blockquotes

    Una cita en bloque es un elemento que se utiliza para mostrar citas. Agregar estas citas en bloque en Markdown es similar a cómo lo hace en muchos clientes de correo electrónico. Como muchos otros elementos, existen algunas opciones sobre cómo crearlos.

    La primera opción es anteponer cada línea de la cita con un mayor que (>) personaje.

    Reducción:

    > Of all the things I've lost 
    > I miss my mind the most. - Mark Twain
    

    HTML:

    <blockquote>
      <p>Of all the things I've lost I miss my mind the most. - Mark Twain</p>
    </blockquote>
    

    Esto puede resultar un poco tedioso para bloques largos de texto continuo, por lo que en su lugar puede usar un solo > antes de la primera línea de cada párrafo, y el resto seguirá:

    Reducción:

    > Measuring programming progress by lines of code is like measuring aircraft building progress by weight. ‚ÄĒ Bill Gates
    

    Tambi√©n se pueden colocar otros elementos de Markdown en las citas en bloque, por lo que si la cita requiere formato, como √©nfasis, puede agregarla. Solo aseg√ļrate de que la l√≠nea comience con el > s√≠mbolo para que esto funcione.

    Liza

    Ambos tipos de listas HTML son compatibles con Markdown: listas desordenadas (<ul>) y listas ordenadas (<ol>).

    Para las listas no ordenadas, hay un par de caracteres diferentes que se pueden usar para declarar un elemento de la lista. Aquí hay algunos ejemplos, todos los cuales producen la misma salida de lista desordenada:

    Markdodwn:

    * Item 1
    * Item 2
    * Item 3
    
    + Item 1
    + Item 2
    + Item 3
    
    - Item 1
    - Item 2
    - Item 3
    

    HTML:

    <ul>
      <li>Item 1</li>
      <li>Item 2</li>
      <li>Item 3</li>
    </ul>
    

    Incluso puede declarar listas anidadas simplemente sangrando el elemento.

    Reducción:

    - Item 1
      - Sub-item 1
      - Sub-item 2
    - Item 2
      - Sub-item 1
    

    HTML:

    <ul>
      <li>Item 1
        <ul>
          <li>Sub-item 1</li>
          <li>Sub-item 2</li>
        </ul>
      </li>
      <li>Item 2
        <ul>
          <li>Sub-item 1</li>
        </ul>
      </li>
    </ul>
    

    En cuanto a las listas ordenadas, las declaras de manera similar, con la mayor diferencia en que usas n√ļmeros en lugar de *, +o - caracteres.

    Reducción:

    1. Item 1
    2. Item 2
    3. Item 3
    

    Con listas ordenadas, ni siquiera importa qu√© n√ļmeros prefijen los elementos. Incluso si tuviera n√ļmeros aleatorios como este:

    Reducción:

    45. Item 1
    0. Item 2
    910. Item 3
    

    HTML:

    <ol>
        <li>Item 1</li>
        <li>Item 2</li>
        <li>Item 3</li>
    </ol>
    

    Las mismas reglas también se aplican a las listas ordenadas para agregar subelementos. Todo lo que tiene que hacer es sangrar el elemento y se iniciará una sublista.

    De manera similar a las citas en bloque, puede agregar bastante formato dentro de cada elemento de la lista, como c√≥digo, citas en bloque, p√°rrafos y cualquier tipo de formato en l√≠nea. Solo aseg√ļrese de que si agrega elementos de bloque (como nuevos p√°rrafos o c√≥digo) los tiene sangrados correctamente. Aqu√≠ hay un ejemplo de una lista con algunos p√°rrafos y una cita en bloque:

    * Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean fringilla velit sit amet lectus tincidunt, quis suscipit tortor maximus. Vestibulum facilisis sit amet tortor sed vestibulum.
    
      Sed nec egestas leo. Nam tristique tincidunt venenatis. Vestibulum vel justo tincidunt, aliquet sapien vitae, vestibulum ex.
    
      Donec commodo, nunc in posuere condimentum, diam est gravida ex, quis varius nisi neque et nunc.
    * Nulla facilisi. Mauris eleifend felis a purus pretium egestas
    

    HTML:

    <ul>
      <li><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean fringilla velit sit amet lectus tincidunt, quis suscipit tortor maximus. Vestibulum facilisis sit amet tortor sed vestibulum.</p>
    
      <p>Sed nec egestas leo. Nam tristique tincidunt venenatis. Vestibulum vel justo tincidunt, aliquet sapien vitae, vestibulum ex.</p>
    
      <p>Donec commodo, nunc in posuere condimentum, diam est gravida ex, quis varius nisi neque et nunc.</p>
      <li><p>Nulla facilisi. Mauris eleifend felis a purus pretium egestas</p>
    </ul>
    
    Bloques de código

    Para mostrar el c√≥digo dentro de su contenido, normalmente usar√≠a el pre y code Etiquetas HTML. En Markdown, para agregar un bloque de c√≥digo, solo necesita sangrar cada l√≠nea con 4 espacios o una sola pesta√Īa. Sin embargo, esto no es como un p√°rrafo en el que solo necesita sangrar la primera l√≠nea y el resto seguir√°. Con los bloques de c√≥digo, en realidad necesita sangrar cada l√≠nea para que se incluya en el bloque. Si hay l√≠neas sin sangr√≠a entre el c√≥digo, lo dividir√°n en bloques separados.

    Check out this code:
    
        def fibonacci(number):
            if number <= 1:
                return number
            else:
                return fibonacci(number - 1) + fibonacci(number - 2)
    
    And use the function like this:
    
        fib_number = fibonacci(8)
        print 'The 8th Fibonacci number is:', fib_number
    
    Wow, that was amazing...
    

    En algunos convertidores de Markdown, puede utilizar alternativamente tres comillas invertidas (`) para crear bloques de código. Personalmente, prefiero este método a la sangría, ya que es más fácil de leer y escribir. Además, si tiene un resaltador de sintaxis, puede declarar en qué idioma está su código para que sepa cómo resaltar el código.

    ```python
    name="Scott"
    print 'Hi my name is ' + name
    ```
    

    No es necesario incluir ‘python’ all√≠, pero ayuda a que el resaltador de sintaxis sea m√°s preciso. Lo hace agregando el idioma declarado como una clase. Entonces, lo anterior dar√≠a como resultado lo siguiente:

    HTML:

    <pre><code class="language-python">
    name="Scott"
    print 'Hi my name is ' + name
    </code></pre>
    
    Regla horizontal

    Para dividir secciones en su texto, puede agregar reglas horizontales (<hr />), que son solo líneas largas que abarcan la longitud del bloque en el que se encuentra. Para agregar una con Markdown, solo agregue tres o más * o -.

    ***
    
    or
    
    ---
    

    También puede colocar espacios entre los caracteres si lo desea:

    * * * * *
    
    - - - - - - - -
    

    Elementos de tramo

    Hay bastantes formas diferentes de crear enlaces, cada una de las cuales depende de los metadatos que necesita, la organización y las preferencias personales. La primera y más sencilla forma de crear un enlace es con este formato: [ANCHOR-TEXT](LINK). Un ejemplo podría ser:

    Reducción:

    [Stack Abuse](http://Pharos.sh.com)
    

    HTML:

    <a href="http://Pharos.sh.com">Stack Abuse</a>
    

    También puede agregar un atributo de título opcional a sus enlaces:

    [Stack Abuse](http://Pharos.sh.com "Stack Abuse Title")
    

    Si lo prefiere, puede utilizar enlaces de estilo de referencia donde el enlace real está separado de donde se hace referencia. Esta referencia puede estar en cualquier parte del texto, siempre que esté en una línea propia.

    OMG it is sooo fun to link to [Stack Abuse][SA], you guys.
    
    [SA]: http://Pharos.sh.com "Stack Abuse Link Title"
    

    El texto de anclaje tambi√©n es opcional, en cuyo caso la ID se utilizar√≠a como texto de anclaje. La parte de ID puede ser un n√ļmero o texto, incluso con espacios.

    √Čnfasis

    Uno de los elementos más utilizados en HTML es el énfasis en el texto, como negrita o cursiva. Cualquiera de estos elementos se puede crear con un guión bajo (_) o asterisco (*).

    Para agregar <em> etiquetas, use una sola _ o * a cada lado del texto. Y para <strong> etiquetas, use dos de esos caracteres en cada lado. Aquí están algunos ejemplos:

    Reducción:

    _This is emphasized text!_
    
    __This is strong text!__
    
    *This is emphasized text!*
    
    **This is strong text!**
    

    HTML:

    <em>This is emphasized text!</em>
    
    <strong>This is strong text!</strong>
    
    <em>This is emphasized text!</em>
    
    <strong>This is strong text!</strong>
    
    Código en línea

    El código en línea se puede agregar mediante comillas invertidas ` dentro de un párrafo, por lo que no es necesario que esté en su propia línea. Esto solo agregará code etiquetas alrededor del texto.

    Reducción:

    In JavaScript, use `console.log()` to print to the console.
    

    HTML:

    <p>In JavaScript, use <code>console.log()</code> to print to the console.</p>
    

    Si alguna vez necesita usar comillas inversas literales dentro de su intervalo de código, debe usar dos comillas inversas en los delimitadores de apertura y cierre. De esta manera puedes hacer cosas como esta:

    Reducción:

    A backtick `` ` `` is used for code blocks.
    

    HTML:

    <p>A backtick <code>`</code> is used for code blocks.</p>
    
    Imagenes

    Vincular im√°genes es muy parecido a agregar enlaces URL. La peque√Īa diferencia es que debe anteponerlo con un signo de exclamaci√≥n (!).

    Reducción:

    ![My Alt Text](/path/to/my/pic.jpg "My Optional Title Text")
    

    HTML:

    <img alt="My Alt Text" title="My Optional Title Text" src="/path/to/my/pic.jpg">
    

    Y lo mismo con los enlaces URL, también puede utilizar referencias.

    ![My Alt Text][id]
    
    [id]: /path/to/my/pic.jpg  "My Optional Title Text"
    

    Misc.

    Escapando

    Si alguna vez necesita utilizar caracteres reservados como *, #o _, deber√° escapar con una barra invertida. Sin embargo, solo necesita escapar si el car√°cter reservado que se est√° utilizando tiene el formato de la sintaxis de Markdown.

    Reducción:

    OMG _this_ had better not have emphasis...
    

    HTML:

    <p>OMG _this_ had better not have emphasis...</p>
    

    Los siguientes caracteres se pueden escapar con una barra invertida:

    • (barra invertida)
    • `(tilde)
    • * (asterisco)
    • _ (guion bajo)
    • {} (llaves)
    • [] (corchetes)
    • () (par√©ntesis)
    • # (s√≠mbolo de almohadilla)
    • + (signo m√°s)
    • – (gui√≥n)
    • . (punto)
    • ! (signo de exclamaci√≥n)
    Vinculación automática

    Hay una forma abreviada de enlace disponible para usted, pero a costa del texto de anclaje. Si desea agregar un enlace y solo tener la URL como texto de anclaje, puede usar esto:

    Reducción:

    <http://Pharos.sh.com>
    

    HTML:

    <a href="http://Pharos.sh.com">http://Pharos.sh.com</a>
    
    Vinculación de correos electrónicos

    Nota: aunque se declara en la especificación Markdown, esta función no es compatible con todos los convertidores.

    Tambi√©n puede utilizar el estilo de enlace abreviado para enlazar a direcciones de correo electr√≥nico con ‘mailto’. Para su comodidad, el convertidor realizar√° una codificaci√≥n de entidad hexadecimal en la direcci√≥n de correo electr√≥nico, que a√ļn se muestra como caracteres ASCII al lector. Esto ayudar√° a evitar que muchos robots recolectores de correo electr√≥nico lean el correo electr√≥nico, pero no todos.

    Reducción:

    <[email protected]>
    

    HTML:

    <a href="&#x6D;&#x61;i&#x6C;&#x74;&#x6F;:&#x61;&#x64;&#x64;&#x72;&#x65;&#115;&#115;&#64;&#101;&#120;&#x61;&#109;&#x70;&#x6C;e&#x2E;&#99;&#111;&#109;">&#x61;&#x64;&#x64;&#x72;&#x65;&#115;&#115;&#64;&#101;&#120;&#x61;&#109;&#x70;&#x6C;e&#x2E;&#99;&#111;&#109;</a>
    

    Conclusión

    No lo olvide, Markdown también le permite insertar HTML sin formato. Entonces, si la sintaxis no le permite especificar los atributos que desea, como height y width en una imagen, puede usar HTML en su lugar. De ahí proviene gran parte del poder, en forma de flexibilidad.

    Tenga en cuenta que esta no es una guía definitiva para la sintaxis de Markdown. Si desea un recurso más completo y completo, debe consultar el convertidor específico que está utilizando o la guía de John Gruber en Bola de fuego atrevida.

     

    Etiquetas:

    Deja una respuesta

    Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *