மைக்ரோலைட்டர்: தொடரியல் ஹைலைட்டர் | CSS-தந்திரங்கள்

மைக்ரோலைட்டர்: தொடரியல் ஹைலைட்டர் | CSS-தந்திரங்கள்


போகலாம்! சிக்கலான மார்க்அப், இடைவெளிகள், வகுப்புகள் மற்றும் ப்ளோடட் ஜாவாஸ்கிரிப்ட் இல்லாத குறியீடு தொகுதிகளுக்கான தொடரியல் விளக்கம், அங்கிள் டேவின் உபயம்.

  const answer = 42;

மைக்ரோலைட்டர் என்பது மிகவும் நேரடியான CSS ஆகும், இது தனிப்பயன் சிறப்பம்சத்தை நம்பியுள்ளது ::highlight() போலி… இது இந்த ஆண்டு முக்கியமானது!

தீம்கள், வரி எண்கள், பல மொழி ஆதரவு, சொற்பொருள் மார்க்அப் மற்றும் பல – CSS-தந்திரங்களில் நமக்குத் தேவையான அனைத்தையும் இது சரியாகச் செய்கிறது, ஆனால் நாம் சார்ந்திருக்கும் கூடுதல் சார்புகள் இல்லாமல்.

பல ஆண்டுகளுக்கு முன்பு, கிறிஸ் தனிப்பயன் வேர்ட்பிரஸ் தொகுதியை உருவாக்கினார், அது Prism.js இல் செருகப்படுகிறது. ப்ரிஸத்தில் நிச்சயமாக எந்தத் தவறும் இல்லை. இது நிலையானது, ஒரு டன் மொழிகளை ஆதரிக்கிறது, மிகவும் இலகுவானது மற்றும் நிறைய சோதிக்கப்பட்டது. எப்படியிருந்தாலும், எனது வேர்ட்பிரஸ் வலைப்பதிவில் இதை ஒருங்கிணைக்க நான் நிச்சயமாகப் பார்ப்பேன்.

ஜாவாஸ்கிரிப்ட் இதில் இல்லை என்று இது அர்த்தப்படுத்துவதில்லை. இது தேவையானதை விட குறைவு. மேலும் இது நவீன CSS ஐ பெரிதும் நம்பியுள்ளது, அது விஷயங்களை உருவாக்குகிறது light-dark() வழியில் ஆதரவு மற்றும் விருப்ப அம்சங்கள், உங்கள் சொந்த தீம் உருட்டல் முற்றிலும் செய்யக்கூடியது.

--syntax-background: light-dark(#ffffff, #0d1117);
--syntax-foreground: light-dark(#24292f, #c9d1d9);
--syntax-comment: light-dark(#6e7781, #8b949e);
--syntax-keyword: light-dark(#cf222e, #ff7b72);
--syntax-operator: light-dark(#24292f, #c9d1d9);
--syntax-string: light-dark(#0a3069, #a5d6ff);
--syntax-constant: light-dark(#0550ae, #79c0ff);
--syntax-function: light-dark(#8250df, #d2a8ff);
--syntax-type: light-dark(#8250df, #d2a8ff);
--syntax-variable: light-dark(#953800, #ffa657);
--syntax-property: light-dark(#0550ae, #79c0ff);
--syntax-tag: light-dark(#116329, #7ee787);
--syntax-selector: light-dark(#8250df, #d2a8ff);
--syntax-inserted: light-dark(#116329, #7ee787);
--syntax-deleted: light-dark(#cf222e, #ff7b72);

கூடுதலாக, நீங்கள் விரும்பும் எதையும் செருகலாம் என்ற பொருளில் இது சூப்பர் மாடுலர் ஆகும்: குறிப்பிட்ட தீம்கள், நீங்கள் ஆதரிக்க வேண்டிய மொழிகள் மட்டுமே, வரி எண்கள், ஒரு வலை கூறு.

import "microlighter/micro-lighter-element.min.js";

  
    const answer = 42;
  

இந்த புத்திசாலித்தனமான சிறிய வலை எழுத்துருவையும் இது எனக்கு நினைவூட்டுகிறது, இது சவாரிக்கு தொடரியல் சிறப்பம்சத்தைக் கொண்டுவருகிறது. எனது தனிப்பட்ட தளத்தில் நீண்ட நாட்களாக எந்த வித சலசலப்பும் இல்லாமல் மகிழ்ச்சியுடன் பயன்படுத்தி வருகிறேன்.

புதுப்பிப்பு (ஆகஸ்ட் 31, 2026): இந்த தளத்தில் ப்ரிஸத்திற்குப் பதிலாக மைக்ரோலைட்டரைச் சேர்த்து முடித்தேன். பக்க வேகம் போன்றவற்றின் அடிப்படையில் செயல்திறனை நான் ஒப்பிடவில்லை, ஆனால் சேமிப்புகள் மிகவும் குறிப்பிடத்தக்கவை என்று என்னால் கூற முடியும். ப்ரிஸம் 35 KB raw இல் (9.3 KB gzipped), MicroLighter 13.9 KB raw இல் (5.2 KB gzipped) வருகிறது. தனிப்பயன் வேர்ட்பிரஸ் தனிப்பயனாக்கங்கள் உள்ளன என்பதைக் கருத்தில் கொள்வது மோசமானதல்ல.

நேரடி இணைப்பு →



Source link

Leave a Reply

Your email address will not be published. Required fields are marked *

Instagram Posts Collection

Instagram Posts Collection