2015-07-01 6 views
12

मैं ब्लॉगर के साथ Highlight.js को एकीकृत करने की कोशिश कर रहा हूं। अब तक, सिंटैक्स हाइलाइटिंग बहुत अच्छा काम करता है, लेकिन मुझे स्वचालित रूप से लपेटने के लिए <pre><code> तत्वों के अंदर कोड लाइनों को रोकने का कोई तरीका नहीं दिख रहा है। ब्राउजर के लिए एक क्षैतिज स्क्रॉल बार प्रदर्शित करने के लिए मुझे इसकी आवश्यकता है।हाइलाइट.जेएस: ऑटो लाइन रैप को अक्षम नहीं कर सकता

मैं, ब्लॉग टेम्पलेट के लिए निम्न को शामिल किया है <head> के अंत में, के रूप में साइट में विस्तार से बताया:

<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> 

और मेरे सभी उपयोग उदाहरण हैं:

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

मैं कोशिश की है किसी भी लाभ के लिए Highlight.js सीएसएस फ़ाइल को संपादित करने के लिए। मैंने pre और code शैलियों overflow-x संपत्ति को scroll पर कोई भी बदलाव किए बिना सेट करने का भी प्रयास किया है। मेरा अनुमान है कि ब्लॉगर वैश्विक स्तर पर उस संपत्ति को ओवरराइट करता है।

क्या किसी को इस पर काबू पाने और कोड क्षेत्र के अंत में लपेटने/तोड़ने से कोड लाइनों से बचने के बारे में पता है, इसके बजाय क्षैतिज स्क्रॉल बार दिखा रहा है?

उत्तर

6

इस issue on the GitHub page को खोलने के बाद, लेखक ने पुष्टि की कि लाइन रैपिंग उनकी लिपियों द्वारा नहीं की गई थी।

उसके बाद, मैंने सीएसएस में कुछ और झुकाव किया और light.js की .hljs शैली को ओवरराइड करके समस्या को ठीक करने में सक्षम था। यह एकमात्र तरीका है जिसे मैंने टेक्स्ट रैप को रोकने और स्क्रॉलिंग की अनुमति देने में कामयाब रहा है। यह शायद सबसे अच्छा या केवल ठीक नहीं है, लेकिन जहां तक ​​सीएसएस का मेरा ज्ञान जाता है। निम्नलिखित कोड है जिसे मैंने ब्लॉगर टेम्पलेट में जोड़ा है।

<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> 

मैं inline-block करने के लिए display बदल गया है और overflow-x: scroll और padding-right: 100% जोड़ दिया है। पैडिंग कोड क्षेत्र को टेक्स्ट की सबसे लंबी रेखा के आकार में घटने से रोकने के लिए प्रतीत होता है।

+0

मेरे लिए काम नहीं किया। कृपया जांचें कि आप वास्तव में अपने एचटीएमएल पेज से मेल खाते हैं। क्या आपका पृष्ठ सार्वजनिक है? उस मामले में, एक यूआरएल बहुत अच्छा होगा। धन्यवाद! –

+0

हाय @ लारीक। दुर्भाग्यवश अब मैं ब्लॉगर का उपयोग नहीं करता, इसलिए वह पृष्ठ चला गया है, मैं जांच नहीं कर सकता। मैंने इसे छोड़ने के कारणों में से एक कारण वास्तव में था क्योंकि मैं एचटीएमएल/सीएसएस पर बेहतर नियंत्रण चाहता था। मुद्दे प्रदर्शन और अतिप्रवाह गुणों के साथ थे, मुझे यकीन है कि। मेरा सुझाव है कि आप डेवलपर टूल मेनू में अपने ब्राउज़र के लाइव सीएसएस संपादक के साथ उन पैरामीटर को ट्वीव करने का प्रयास करें। इस तरह की समस्याओं को इस तरह से डीबग करना बहुत आसान है। – glampert

3

एक चीज जो मैंने हल की थी, समस्या हल हो गई थी ताकि एचएलजे तत्व की चौड़ाई बहुत बड़ी हो। यह एक इष्टतम समाधान नहीं है, लेकिन यह काम करता है।

.hljs { width: 2300px; } 
7

यह मैं

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

अनुकूलित .hljs github.css से शैली के लिए काम किया और अपने पृष्ठों में github.css के बाद यह जगह।

.hljs { 
    display: inline-block; 
    white-space: pre; 
    overflow-x: auto; 
    padding: 0.5em; 
    color: #333; 
    background: #f8f8f8; 
} 
संबंधित मुद्दे