web-dev-qa-db-fra.com

Code formaté avec SyntaxHighlighter Evolved n'apparaissant pas correctement sur iPad/iPhone

Je viens de commencer un blog de programmation et j'utilise le plugin SyntaxHightlighter Evolved pour formater mon code. Sur la plupart des navigateurs, cela fonctionne très bien. Cependant, si j'essaie d'afficher le site depuis un iPhone ou un iPad, les numéros de ligne et le code ne sont plus alignés. Fondamentalement, le problème semble être que les numéros de ligne et les polices de code sont dimensionnés indépendamment (voir image ci-dessous).

J'ai supposé que quelqu'un devait avoir vu le problème, j'ai donc consulté The Mightly Oracle Google, mais je n'ai rien trouvé de pertinent. J'ai également cherché ce site en vain.

En tant que programmeur, j’ai examiné le code source, mais j’ai réalisé qu’il me faudrait un certain temps pour comprendre comment cela fonctionne et résoudre le problème.

J'utilise Wordpress version 3.1.2 avec le thème Twenty Ten version 1.2

J'ai les plugins suivants actifs:

  • Google Analytics pour WordPress version 4.1
  • SyntaxHighlighter version 3.1.1

Quelqu'un d'autre a-t-il déjà vu (résolu, espérons-le) ce problème? Ou une âme bienveillante pourrait-elle me diriger dans la bonne direction?

Si vous avez besoin de voir le site Web, il y a un lien dans mon profil. Je ne veux pas faire de liens-spams ;-)

Merci d'avance!

MISE À JOUR: 17/05/2011

Je pensais avoir trouvé une solution mais, même si cela résolvait le problème sur l'iPad, cela restait un problème sur l'iPhone. Donc, la prime est toujours à gagner.

Syntax Highlighter Evolved

iphoneplugin-syntaxhighlighter
5
idz

Il s'avère que la feuille de style (style.css) du thème Twenty Ten modifie la taille de pre et code de manière indépendante. Cela semble être la cause du problème. De plus, cela augmente la taille des polices, ce qui les rend trop grandes par rapport au reste du texte.

Ce sont les lignes qui causent le problème:

/* =Mobile Safari ( iPad, iPhone and iPod Touch )
-------------------------------------------------------------- */

pre {
    -webkit-text-size-adjust: 140%;
}
code {
    -webkit-text-size-adjust: 160%;
}

J'ai commenté ces deux sections:

/* =Mobile Safari ( iPad, iPhone and iPod Touch )
-------------------------------------------------------------- */


/*
pre {
    -webkit-text-size-adjust: 140%;
}
code {
    -webkit-text-size-adjust: 160%;
}
*/

Donc, je suppose que je suis dans la position étrange de répondre à ma propre question. Merci à tous ceux qui ont pris le temps de regarder cela. Surtout @DaveKonopka qui, au moment de la rédaction de cet article, était le seul à proposer une solution possible.

3
idz

Cela semble être un problème avec SyntaxHighlighter la bibliothèque js sous-jacente utilisée par le plug-in. J'ai chargé la démo js tout seul et j'ai obtenu les mêmes résultats offset sur mon iPhone. Je ne comprends toujours pas pourquoi, mais la taille de la police du numéro de Gutter n'est pas cohérente avec les lignes de code.

Une solution potentielle consiste à ajuster la taille de la police sur les numéros de gouttière par un petit pourcentage correspondant au code. Les requêtes multimédias peuvent être utilisées pour cibler et appliquer le correctif uniquement aux appareils iPhone et iPad.

J'ai ajouté le code suivant à l'exemple fourni avec le package SyntaxHighlighter js. Cela a corrigé le problème sur mon iPhone. Vous pourriez probablement mettre ce CSS dans votre thème WordPress et obtenir les mêmes résultats.

<style type="text/css">

/* ios safari line number fix */

  /* ipad */
  @media only screen and (min-device-width: 768px) and (max-device-width: 1024px) {
    td.Gutter div.line { font-size: 1.4em !important; }
  }

  /* iphone */
  @media only screen and (max-device-width: 480px) {
    td.Gutter div.line { font-size: 1.4em !important; }
  }

</style>

Il tient bien pour moi avec de longs extraits de code (plus de 50 lignes). Je n'ai pas d'iPad sur lequel tester.

3
Dave Konopka