¿Diseño de libro de texto que incluye ejemplos de dos lenguajes de programación de computadoras diferentes?

Los encabezados (fuente proporcional) y los bloques de código (fondo, fuente monoespaciada) son tipográficos, la solución más simple y limpia. Funcionará con fragmentos pequeños y ejemplos grandes (página desbordada):

Pitón

print "Hello world!"

JavaScript

alert('Hello world!');

sql

SET SERVEROUTPUT ON;
BEGIN
    DBMS_OUTPUT.PUT_LINE('Hello, world!');
END;

Los encabezados pueden ocupar mucho espacio. Especialmente cuando tienes muchos fragmentos cortos. Comentar el nombre del idioma como etiqueta es una buena alternativa:

# Python
print "Hello world!"

// JavaScript
alert('Hello world!');

-- SQL
SET SERVEROUTPUT ON;
BEGIN
    DBMS_OUTPUT.PUT_LINE('Hello, world!');
END;

Separe estos fragmentos con un pequeño espacio en blanco. Entonces su lector lo ve como tres bloques.

ACTUALIZAR

Un ejemplo de código en línea:

Ahora escribe print 'Hello World!'. ¡Bien hecho!

De nuevo monoespaciado y fondo gris. Una fuente monoespaciada para el código es una opción obvia. Pero existen otros métodos para crear 'contraste' entre el cuerpo del texto y el código. Los métodos tipográficos obvios para hacer distinciones son tipo de letra, tamaño, color, posición, forma, etc.

Para hacer una distinción entre los dos lenguajes de programación, puede elegir de la misma paleta.

RETROALIMENTACIÓN

Estos son algunos comentarios sobre su maqueta:

• Reduzca el tamaño de fuente del código. Por el momento, el código parece más grande que el cuerpo del texto. Debería ser de otra manera.
• Sin marcos negros. ¿Alguien murió? No.
• Coloque la etiqueta de idioma en la parte superior. Es el lugar obvio. En situaciones en las que un ejemplo de código fluye a la página siguiente, la etiqueta será invisible.
• Agregue una sangría izquierda a los bloques de código. El código debe alinearse con el texto o saltar hacia adentro. De momento es al revés.
• Si necesita una distinción entre los idiomas, hágalo MUCHO más sutil. Estos elementos gráficos se repetirán mucho.
• ¿Quizás iconos? .mMatlab, .pyPhyton. Explícalos en un capítulo de convenciones tipográficas. http://books.google.nl/books?id=nEJ-jcYF2fMC&lpg=PP1&hl=nl&pg=PR41#v=onepage&q&f=false
• No creo que el fondo gris sea absolutamente necesario. La desventaja de los marcos es que agregan un margen adicional. Del cuerpo del texto al marco y del marco al código.

Ejemplo sin fondo y con sangría:

Creo que un pequeño ícono antes de los ejemplos de código (en el margen, también conocido como 'fuera del lienzo'). Será agradable.

Guarde copias de sus ciclos de diseño para poder comparar y ver qué funciona mejor. Normalmente hago pasos muy pequeños, ahorrándome todo el proceso.

Mis comentarios son solo consejos, tienes que ver por ti mismo qué funciona mejor.