बिल्ट-इन syntax highlighting वाला फ़ॉन्ट

 (blog.glyphdrawing.club)
8 पॉइंट द्वारा GN⁺ 2024-08-15 | 1 टिप्पणियां | WhatsApp पर शेयर करें

समस्या

  • जब HTML और CSS के साथ हाथ से कोड करके वेबसाइट बनाई जाती है, तब syntax highlighting करना कठिन होता है
  • कोड snippets को आसानी से पढ़ने और समझने के लिए उन्हें रंगों से highlight करना चाहते हैं
  • आम तौर पर Prism या highlight.js जैसी जटिल syntax highlighting लाइब्रेरी इस्तेमाल करनी पड़ती है
  • बाहरी scripts का उपयोग किए बिना हाथ से कोड करना चाहते हैं

OpenType फीचर्स का उपयोग करके फ़ॉन्ट के भीतर ही syntax highlighting जोड़ना

  • Monaspace Krypton नाम के open source फ़ॉन्ट को संशोधित करके हर character के color versions शामिल किए गए
  • OpenType की COLR table और contextual substitution फीचर का उपयोग करके खास strings को खोजकर बदला गया
  • नतीजतन, फ़ॉन्ट के भीतर ही बिल्ट-इन एक सरल syntax highlighter तैयार हुआ

फायदे और नुकसान

फायदे

  • इंस्टॉल करना आसान: फ़ॉन्ट import करें और OpenType COLR (color) तथा CALT (contextual substitution) फीचर्स को सक्रिय कर दें
  • JavaScript की ज़रूरत नहीं
  • CSS theme की ज़रूरत नहीं
  • plain text जितना तेज़
  • <pre> और <code> tags में code snippets जोड़े जा सकते हैं
  • साफ़-सुथरा HTML source code
  • InDesign जैसे OpenType फीचर्स सपोर्ट करने वाले हर स्थान पर काम करता है
  • maintenance या updates की ज़रूरत नहीं
  • <textarea> और <input> में भी काम करता है

नुकसान

  • color palette बदलने या language support जोड़ने जैसे बदलावों के लिए फ़ॉन्ट फ़ाइल को ही संशोधित करना पड़ता है
  • केवल वहीं काम करता है जहाँ OpenType सपोर्ट हो
  • OpenType contextual substitution से pattern matching बुनियादी स्तर की है, और regex इस्तेमाल करने वाली scripts से इसकी तुलना नहीं की जा सकती

यह वास्तव में कैसे काम करता है

  • OpenType COLR table और contextual substitution फीचर का उपयोग किया जाता है
  • COLR table बहुरंगी फ़ॉन्ट को संभव बनाती है
  • contextual substitution पास-पड़ोस के characters को पहचानकर उन्हें बदलती है
  • उदाहरण: JavaScript keyword if को खोजकर उसके color variant से बदल देना

GN⁺ का सार

  • यह लेख हाथ से वेबसाइट कोड करते समय syntax highlighting लागू करने का एक नया तरीका प्रस्तुत करता है
  • OpenType फीचर्स का उपयोग करके फ़ॉन्ट में ही syntax highlighting एम्बेड की जाती है, जिससे JavaScript या CSS theme के बिना भी syntax highlighting संभव होती है
  • यह तरीका सरल syntax highlighting के लिए उपयुक्त है, लेकिन जटिल syntax highlighting लाइब्रेरी की तुलना में इसकी सीमाएँ हैं
  • समान सुविधा देने वाले प्रोजेक्ट्स में Prism, highlight.js आदि शामिल हैं

संबंधित पढ़ाई

1 टिप्पणियां

 
GN⁺ 2024-08-15
Hacker News राय

  • दिलचस्प हैक है

    • OpenType फीचर्स के इस्तेमाल को लेकर थोड़ी उलझन है
    • font-feature-settings: "colr", "calt"; सेटिंग का कोई मतलब नहीं बनता
    • colr फीचर टैग OpenType layout table में मौजूद नहीं है
    • संभव है कि COLR table को सक्षम करने का इरादा रहा हो
    • calt फीचर डिफ़ॉल्ट रूप से सक्षम रहता है
    • Firefox और Chrome में यह ठीक काम करता है, लेकिन Safari में नहीं

  • मूल टेक्स्ट जस का तस बना रहता है

    • tag wrapping या JS के बिना userContent.css के साथ काम करता है
    • यह एक बिल्कुल अलग स्तर का तरीका है

  • मैं OpenType विशेषज्ञ नहीं हूँ, इसलिए fallback logic को बेहतर किया जा सकता है

    • संशोधित source file साझा करने की इच्छा है
    • कोई आइडिया या फ़ीडबैक हो तो संपर्क करें

  • यह हैक भयानक है, लेकिन चौंकाने वाला भी

    • OpenType contextual substitution फीचर का शानदार दुरुपयोग करता है
    • इसे साझा करने के लिए धन्यवाद

  • शानदार हैक है

    • लगभग 45kB है, जो baseline highlight.js के लगभग बराबर है
    • JavaScript निष्क्रिय होने वाले वातावरण में भी काम करता है
    • runtime configuration और language support सीमित हो जाते हैं

  • पेज के नीचे अच्छा संदेश है

    • "यह साइट cookies का उपयोग नहीं करती और third-party sites के लिए लिंक नहीं करती"
    • यह बात पसंद आई

  • लगता है इसे code से automate किया जा सकता है

    • सामान्य use cases के लिए उपयोगी तरीका है

  • Chromium-आधारित browsers में bug है

    • color: blue टाइप करने पर सिर्फ r highlight होता है
    • copy+paste करने पर यह सही काम करता है
    • फिर भी यह शानदार फीचर है

  • यह सचमुच शानदार फीचर है

    • इसे textarea और input fields के अलावा बड़े HTML documents में भी इस्तेमाल किया जा सकता है
    • बहुत सारे span और HTML tags का उपयोग नहीं करना पड़ता
    • hardware-accelerated font rendering software सब कुछ संभाल लेता है
    • इससे memory और CPU की काफी बचत हो सकती है

  • लगता है parser generator जैसी किसी चीज़ की ज़रूरत होगी

    • यह स्पष्ट नहीं है कि rules कितने expressive हैं

  • सचमुच हैरान कर देने वाला फीचर है

    • इसे बेहतर typeface में देखने की उम्मीद है (जैसे Inconsolata या JetBrains Mono)
    • JSON को आसानी से दिखाने में यह उपयोगी होगा