Highlight.js mit Blogger: kann den automatischen Zeilenumbruch nicht deaktivieren

Ich versuche, Highlight.js mit Blogger zu integrieren. Bis jetzt funktioniert die Syntax-Hervorhebung sehr gut, aber ich kann keinen Weg finden, die Codezeilen innerhalb der <pre><code> Elemente automatisch zu umbrechen. Stattdessen muss der Browser eine horizontale Bildlaufleiste anzeigen.Highlight.js mit Blogger: kann den automatischen Zeilenumbruch nicht deaktivieren

Ich habe folgendes auf den Blog-Vorlage, am Ende des <head> hinzugefügt, wie in der Website erklärt:

<link href='//cdnjs.cloudflare.com/ajax/libs/highlight.js/8.6/styles/solarized_dark.min.css' rel='stylesheet'/> 
<script src='//cdnjs.cloudflare.com/ajax/libs/highlight.js/8.6/highlight.min.js'/> 
<script type='text/javascript'> 
    hljs.initHighlightingOnLoad(); 
</script>

Und alle meine Nutzung Instanzen sind:

<pre><code class='cpp'> 
    // code here; 'class' changed according to language. 
</code></pre>

ich versucht habe, um die Highlight.js-CSS-Datei vergeblich zu bearbeiten. Ich habe auch versucht, die pre und code Stile overflow-x Eigenschaft zu scroll ohne irgendeine Änderung einzustellen. Meine Vermutung ist, dass Blogger diese Eigenschaft global überschreibt.

Kennt jemand eine Möglichkeit, dies zu vermeiden und die Codezeilen am Ende des Codebereichs zu vermeiden, indem die horizontale Bildlaufleiste angezeigt wird?

Quelle

2015-07-01 glampert

Nach dem Öffnen dieser issue on the GitHub page, der Autor bestätigt, dass die Zeilenumbruch wurde nicht durch seine Skripte.

Danach habe ich ein wenig mehr in der CSS fiedeln und war in der Lage, das Problem durch Überschreiben der .hljs Art von highlight.js zu beheben. Dies war die einzige Möglichkeit, den Zeilenumbruch zu verhindern und das Scrollen zu erlauben. Es ist wahrscheinlich nicht die beste oder einzige Lösung, aber das ist soweit meine CSS-Kenntnisse. Im Folgenden finden Sie den Code, den ich der Blogger-Vorlage hinzugefügt habe.

<link href='//cdnjs.cloudflare.com/ajax/libs/highlight.js/8.6/styles/solarized_dark.min.css' rel='stylesheet'/> 
<style type='text/css'> 
pre, code { 
    white-space: pre; 
    overflow-x: scroll; 
} 
.hljs { 
    display: inline-block; 
    overflow-x: scroll; 
    padding: 0.5em; 
    padding-right: 100%; 
    background: #002b36; 
    color: #839496; 
    -webkit-text-size-adjust: none; 
} 
</style> 

<script src='//cdnjs.cloudflare.com/ajax/libs/highlight.js/8.6/highlight.min.js'></script> 
<script type='text/javascript'> 
    hljs.initHighlightingOnLoad(); 
</script>

habe ich display-inline-block geändert und overflow-x: scroll und padding-right: 100% hinzugefügt. Die Auffüllung scheint zu verhindern, dass der Codebereich auf die Größe der längsten Textzeile verkleinert wird.

Quelle

2015-07-01 21:08:19 glampert

Hat nicht für mich gearbeitet. Bitte überprüfen Sie, ob Ihre Antwort genau Ihrer HTML-Seite entspricht. Ist deine Seite öffentlich? In diesem Fall wäre eine URL großartig. Vielen Dank! –

Hallo @LarryK. Leider benutze ich Blogger nicht mehr, so dass die Seite weg ist, kann ich nicht überprüfen. Einer der Gründe, warum ich es fallen gelassen habe, war in der Tat, weil ich eine bessere Kontrolle über HTML/CSS wollte. Die Probleme waren mit Anzeige- und Überlaufeigenschaften, da bin ich mir sicher. Ich schlage vor, dass Sie versuchen, diese Parameter mit dem Live-CSS-Editor Ihres Browsers im Entwickler-Tools-Menü zu optimieren. Es ist viel einfacher, diese Art von Problemen auf diese Weise zu debuggen. – glampert

Eine Sache, die ich tat, die das Problem löste, war, die Breite des hljs-Elements zu legen, um sehr groß zu sein. Dies ist keine optimale Lösung, aber es funktioniert.

.hljs { width: 2300px; }

Quelle

2016-01-06 22:30:19

Dieser arbeitete für mich

.hljs { 
    white-space: pre; 
    overflow-x: auto; 
}

Quelle

2016-12-06 16:12:30

anpassen .hljs Stil von github.css und legen Sie sie nach github.css in Ihre Seiten.

.hljs { 
    display: inline-block; 
    white-space: pre; 
    overflow-x: auto; 
    padding: 0.5em; 
    color: #333; 
    background: #f8f8f8; 
}

Quelle

2017-11-06 08:07:28

Highlight.js mit Blogger: kann den automatischen Zeilenumbruch nicht deaktivieren

Antwort

Verwandte Themen