8

La ayuda de Stackoverflow dice que podemos usar fragmentos de código que se pueden ejecutar en nuestra respuesta misma.

Es una función bastante útil.

Ejemplo de fragmento que combina JavaScript, CSS y HTML:

<!-- begin snippet: ... -->

    Contenido precedido del lenguaje al que pertenece...

<!-- language: lang-js -->

    Contenido JavaScript...

<!-- language: lang-css -->

    Contenido CSS...

<!-- language: lang-html -->

    Contenido HTML...

     Y al final...

<!-- end snippet -->

Cuando está bien construido se puede ver debajo el botón Ejecutar desde el cual se puede probar el código.

Por ejemplo:

jQuery(function($) {
    $.datepicker.regional['es'] = {
        closeText: 'Cerrar',
        prevText: '&#x3c;Ant',
        nextText: 'Sig&#x3e;',
        currentText: 'Hoy',
        monthNames: ['Enero', 'Febrero', 'Marzo', 'Abril', 'Mayo', 'Junio',
            'Julio', 'Agosto', 'Septiembre', 'Octubre', 'Noviembre', 'Diciembre'
        ],
        monthNamesShort: ['Ene', 'Feb', 'Mar', 'Abr', 'May', 'Jun',
            'Jul', 'Ago', 'Sep', 'Oct', 'Nov', 'Dic'
        ],
        dayNames: ['Domingo', 'Lunes', 'Martes', 'Mi&eacute;rcoles', 'Jueves', 'Viernes', 'S&aacute;bado'],
        dayNamesShort: ['Dom', 'Lun', 'Mar', 'Mi&eacute;', 'Juv', 'Vie', 'S&aacute;b'],
        dayNamesMin: ['Do', 'Lu', 'Ma', 'Mi', 'Ju', 'Vi', 'S&aacute;'],
        weekHeader: 'Sm',
        dateFormat: 'yy/mm/dd',
        firstDay: 1,
        isRTL: false,
        showMonthAfterYear: false,
        yearSuffix: ''
    };
    $.datepicker.setDefaults($.datepicker.regional['es']);
});

$(document).ready(function() {
    $("#datepicker1").datepicker({
        appendText: ' Haga click para introducir una fecha'
    });
});
div,label,input{
  background-color: #d0e0f090;
}
<!-- Librerías -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>

<!-- HTML -->
<div>
    <label>Ingrese Fecha:</label>
    <input type="text" name="fecha" readonly id="datepicker1">
</div>

Ahora viene mi pregunta:

La ayuda de SO en español da ejemplos para JavaScript, HTML, C#... Pero, ¿Se puede usar esta técnica para otros lenguajes tales como Java, PHP, SQL? ¿Cómo se combina JavaScript con HTML? ¿Se podría combinar por ejemplo PHP y HTML en un bloque de código y verlo correr en nuestras respuestas? ¿Existe un catálogo de sintaxis para los lenguajes más usados al que uno pueda referirse?

8
  • 4
    No. Sólo hay Snippets para JavaScript/HTML/CSS. Para el resto, se usa el botón { } para darle formato, pero no es ejecutable. Desde luego, podrías incluir un enlace a la demo en otra página.
    – Mariano
    Commented el 23 feb. 2017 a las 10:14
  • 1
    Probablemente encuentres toda esta información en Códigos ocultos en stackoverflow - ¿Cómo Mostrar y ocultar fragmento?
    – Mariano
    Commented el 23 feb. 2017 a las 10:24
  • Gracias @Mariano. No pensé en lo del demo porque inicialmente la pregunta estaba en SO, no en meta porque consideraba que era más útil allí, pero fue migrada. Allí corría el código en la misma pregunta.
    – A. Cedano
    Commented el 23 feb. 2017 a las 11:07
  • Con lo de demo, me refería a publicar el código en páginas como ideone.com, rextester.com, etc. y agregar el enlace a tu pregunta.
    – Mariano
    Commented el 23 feb. 2017 a las 11:27
  • @Mariano porque la idea del fragmento de código que adjunté era para que se viera cómo funcionaban los snippets en las respuestas-preguntas de SO, y no probar que el código en sí funcionaba Una vez trasladado a la sección meta la presencia del código completo pierde su sentido, así que estoy considerando eliminar esa parte de la pregunta.
    – A. Cedano
    Commented el 23 feb. 2017 a las 12:15
  • No hace falta. Todos sabemos cómo funciona y qué estás queriendo decir.
    – Mariano
    Commented el 23 feb. 2017 a las 12:17
  • 4
    Yo recomiendo dejar esa parte. Hay muchos usuarios que creen que eso funciona para todo tipo de código, así como hay usuarios que no saben de la existencia de esta funcionalidad. El ejemplo ayuda a reforzar ambas ideas.
    – user227
    Commented el 23 feb. 2017 a las 12:26
  • @A.Cedano para MS SQL/MySQL/SQLite se puede usar SQLFiddle, sin embargo, su funcionalidad es limitada. Commented el 23 feb. 2017 a las 16:49

1 respuesta 1

4

Me parece que la pregunta abarca dos características de SOes:

  1. Resaltador de sintáxsis para código.
  2. Complemento de fragmentos de código ejecutable.

Ambos conceptos hacen uso de markdown, de hecho, se podría decir que el segundo depende del primero.

En la documentación en inglés:

  • Al primero se le llama "Syntax highlighting for code".
  • Al segundo se le llama "Runnable JavaScript, CSS, and HTML Code Snippets", o simplemente "Stack Snippet".

Cabe hacer notar que:

  1. La sección de la página de la ayuda a la que se hace referencia en la pregunta se refiere al resaltado de sintaxis para código pero no abarca los detalles del complemento de fragmentos de código ejecutable.

  2. El complemento de fragmento de código ejecutable sólo admite JavaScript, CSS y HTML.

Una pista de la limitación de los lenguajes soportados por el complmento está en el texto que muestra la interfaz al pasar el puntero sobre el botón para insertar un fragmento de código es fragmento JavaScript/HTML/CSS seguido de la combinación de teclas para insertarlo Control + M .

Nota: Aunque se puede ver en la captura de pantalla que CSS está luego de HTML, al momento de insertar el snippet, el orden en el código fuente siempre es el mismo, JavaScript, CSS y HTML. El código fuente se refiere al momento de editar la publicación.

Esto significa incluso que si se cambia el orden manualmente, y luego se lo vuelve a editar, presionando el enlace editar este fragmento de código, y luego se lo guarda presionando el botón Guardar e insertar, se reestablece el orden de los lenguajes para tal snippet.

No he encontrado una página en la ayuda sobre este complemento, me parece que sólo existe la documentación creada por la comunidad.

Por ejemplo estas dos:

6

Debes iniciar sesión para responder a esta pregunta.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta .