హబ్ర్‌లో కోడ్‌ను సరిగ్గా ఎలా రంగు వేయాలి మరియు అది ఎందుకు చాలా కష్టం

హబ్ర్‌లో కోడ్‌ను సరిగ్గా ఎలా రంగు వేయాలి మరియు అది ఎందుకు చాలా కష్టం

కొన్ని నెలల క్రితం నేను ప్రచురించాను నా మొదటి పోస్ట్ హబ్రలో. మీలో కొందరు గమనించవచ్చు, వ్యాసంలోని కోడ్‌కు అసాధారణమైన రంగు వేయబడింది, మరియు అన్నింటికన్నా ముఖ్యంగా, సైట్ యొక్క అంతర్నిర్మిత టెక్స్ట్ ఎడిటర్ అసలు కోడ్ మార్కప్‌కు మద్దతు ఇవ్వకపోయినా మరియు తరచుగా దాని ఎలిమెంట్లను తప్పుగా హైలైట్ చేసినప్పటికీ, దానికి సరైన రంగు వేయబడింది. అంతేకాక, కొందరు నిస్సహాయ రచయితలు చేసే విధంగా, ఈ కోడ్‌ను ఒక చిత్రంగా చొప్పించలేదు.

నా విషయంలో, మార్కప్‌ను భద్రపరచడం చాలా ముఖ్యం, ఎందుకంటే ఆ వ్యాసం కోడ్‌పై ఎలా పని చేయాలో వివరించేది. ఆ సమస్యను పరిష్కరించడానికి, నేను సృష్టించాను సాధనంఇది ఎంచుకున్న IDEA డయాగ్రామ్‌లోని కోడ్ హైలైటింగ్‌ను Habr లోని ఒక ఆర్టికల్‌కు బదిలీ చేయడానికి మిమ్మల్ని అనుమతిస్తుంది. నేను ఈ టూల్‌ను సృష్టించే ప్రక్రియను మరియు దాని ఉపయోగంలోని ప్రత్యేకతలను చర్చిస్తాను.

ఇదంతా ఎందుకు?

మొదటి చూపులో, ఇది కేవలం అల్లరిగా చేసినట్లు అనిపించవచ్చు, ఎందుకంటే ట్యాగ్ ద్వారా అమలు చేయబడిన ప్రామాణిక బ్యాక్‌లైటింగ్ సంతృప్తికరంగా లేదు. <source>.

ఒక రకంగా ఇది ఖచ్చితంగా నిజమే, కానీ పూర్తిగా కాదు.

అన్నిటికంటే ముందు, లోపల లైటింగ్ <source> ఇది కోడ్ చంక్స్‌తో పని చేయదు, ఎందుకంటే కలరింగ్ కోసం తగినంత సమాచారం ఉండదు. చంక్ వెలుపల డిక్లేర్ చేయబడిన అన్ని ఎలిమెంట్స్ యాదృచ్ఛికంగా రంగు వేయబడతాయి. ఈ సమస్యకు పరిష్కారం లేదు, ఎందుకంటే, నాకు తెలిసినంతవరకు, ఏ ఆన్‌లైన్ కలరింగ్ సేవలు కూడా కింది వాటిలో దేనినీ చేయడానికి మిమ్మల్ని అనుమతించవు:

  1. ప్రాజెక్ట్ పూర్తి కోడ్‌ను వ్యాసంలో చేర్చండి, కానీ దానిని పూర్తిగా ప్రదర్శించవద్దు, లేదా గిట్‌హబ్ కమిట్‌కు లింక్‌ను చేర్చండి. వ్యాసంలోని నిర్దిష్ట ప్రదేశాలలో, పూర్తి కోడ్ నుండి సంగ్రహాలను (నిర్దిష్ట పరిధిని పేర్కొంటూ) ఉపయోగించండి. హైలైట్ చేయడం అనేది, వాస్తవానికి, పూర్తి కోడ్ ఆధారంగా ఉండాలి.
  2. నిర్వచించబడని ఎలిమెంట్‌ల కోసం స్పష్టమైన మెటాడేటాను అందించండి. ఇది వినియోగదారునికి చాలా క్లిష్టమైన మార్గం, కానీ నేను దానితో ఏకీభవిస్తాను.

రెండవది, లోపల లైటింగ్ <source> ఇది ఒక ప్రామాణిక IDE యొక్క విభిన్న ఎలిమెంట్ రకాల సంఖ్యకు ఎప్పటికీ సరిపోలదు. మరియు పైన వివరించిన సమస్య కారణంగా, అధునాతన కలరింగ్‌ను అమలు చేయడంలో అర్థం లేదు: ఎవరూ పూర్తి ప్రాజెక్ట్ కోడ్‌ను ఒక వ్యాసంలో అతికించరు, కాబట్టి ఈ కార్యాచరణ పనిచేయదు.

అదే సమయంలో, వాస్తవం ఏమిటంటే వ్యాసాలలో కోడ్ భాగాలు ఉండాలి, మరియు అవి ఎంత చిన్నవిగా ఉంటే అంత మంచిది.

హైలైట్ చేయకుండా కోడ్‌ను చదవడం సాధ్యమే, కానీ ఎందుకు?

హబ్ర్ మార్కప్ యొక్క లక్షణాలు

IntelliJ IDEAలో కోడ్‌ను HTMLకు ఎగుమతి చేయడానికి అంతర్నిర్మిత మద్దతు ఉంది. కోడ్‌ను కాపీ చేయడం ద్వారా రంగులతో కూడిన కోడ్ క్లిప్‌బోర్డ్‌కు జోడించబడుతుంది, దీనిని HTMLగా చదవవచ్చు.

దురదృష్టవశాత్తు, హబ్రర్ వ్యాసాలలో నేరుగా HTML మార్కప్‌ను అనుమతించదు. దీనికి గల కారణాలు అంతుచిక్కడం లేదు, కానీ ఇది బహుశా వ్యాస ఫార్మాట్‌లను ప్రామాణీకరించడానికి సంబంధించినది కావచ్చు. వ్యాసాలలో HTMLను అనుమతిస్తే, వీక్షించడంలో సమస్యలు తలెత్తే అవకాశం ఉంది.

వ్యాసాలలో HTMLను నిషేధించాలనే ఆలోచనను నేను సాధారణంగా సమర్థిస్తాను, కానీ ఒక మెలిక ఉంది. ఐటీ నిపుణుల కోసం ఉద్దేశించిన ఒక వనరులో తరచుగా కోడ్ గురించి చర్చ జరుగుతూ ఉన్నప్పటికీ, దానిని ఒక వ్యాసంలో సరిగ్గా చేర్చడానికి మార్గం లేకపోవడం కొంచెం వింతగా ఉంది.

కాబట్టి, మన వద్ద ట్యాగ్‌లు అందుబాటులో ఉన్నాయి. <b>, <i>, <font>అంతేకాకుండా, ఇదంతా ట్యాగ్ లోపల పనిచేస్తుంది. <code>, ఇది ఫార్మాటింగ్ కోసం అవసరం. అలాగే, &nbsp; మేము దానిని కూడా భద్రపరిచాము, ఇది పొడవైన కోడ్ పంక్తులకు మరియు ఇండెంట్‌లకు ఉపయోగపడుతుంది.

చెప్పనవసరం లేదు, IDEA నుండి HTML కోడ్‌ను పొందే అన్ని ప్రామాణిక పద్ధతులు పూర్తిగా భిన్నమైన HTMLను ఉత్పత్తి చేస్తాయి, కాబట్టి మార్పిడి పనికి చాలా శ్రమ అవసరం అవుతుంది.

ఒక విధానం

అన్నిటికంటే ముందుగా రచయితకు కృతజ్ఞతలు చెప్పడం సముచితం. క్యాప్స్లాక్‌లు అతని కోసం материал ఈ అంశంపై. వ్యాసంలో ప్రతిపాదించిన సాధనాన్ని నేను నేరుగా ఉపయోగించలేదు, బహుశా ఉపయోగించి ఉండేవాడిని కూడా కాదు, కానీ ఈ సమాచారం వల్ల, నేను సమస్య యొక్క పూర్తి లోతును అర్థం చేసుకున్నాను మరియు అదే సమయంలో ఒక ఆశాకిరణం కనిపించింది.

ఈ పోస్ట్‌లోని ఏకైక లోపం ఏమిటంటే, ఇందులో చాలా ఎక్కువ కోడ్ ఉండి, అది ఏమి చేస్తుంది మరియు ఎందుకు చేస్తుంది అనే దాని గురించి చాలా తక్కువ వివరణ ఉండటం.

నేను ఈ పరిస్థితిని సరిదిద్దడానికి ప్రయత్నిస్తాను మరియు మీరు మీ HTML కోడ్ మార్కప్‌ను Habrలో పేస్ట్ చేయడానికి సిద్ధంగా ఉండే ఫార్మాట్‌లోకి మార్చాలనుకుంటే ఏమి చేయాలో వివరిస్తాను.

  1. ఎగుమతి చేసే ముందు, మీరు IDEAలో కావలసిన రంగుల పథకాన్ని సెట్ చేయాలి, ఉదాహరణకు కలర్ థీమ్స్ వెబ్‌సైట్ నుండిఎంచుకున్న స్కీమ్‌తో కోడ్ ఎగుమతి చేయబడుతుంది. తెల్లటి నేపథ్యం (ఎందుకంటే Habrలో నేపథ్యాలను సెట్ చేయలేరు) మరియు అండర్‌లైన్‌లు లేని స్కీమ్‌ను ఎంచుకోవడం ఉత్తమం. నాకు నిజంగా ఇష్టం లేనందున, వాటిని సులభంగా ఎలా లాగాలో నేను కనుక్కోలేకపోయాను.
  2. మేము ట్యాగ్ యొక్క అంతర్గత భాగాలతో మాత్రమే పని చేస్తాము <pre>మీరు IDEA కాకుండా వేరే ఎక్స్‌పోర్ట్ టూల్‌ను ఉపయోగిస్తున్నప్పటికీ, మీ HTML మార్కప్‌లో ఈ ట్యాగ్ ఉండే అవకాశం ఉంది, ఎందుకంటే ఇది లేకుండా కోడ్‌ను సరిగ్గా ఫార్మాట్ చేయడం కష్టం. ఆ ట్యాగ్‌ను తీసివేసి, దాని స్థానంలో దీనిని చేర్చండి. <code>.
  3. పాఠ్యం చాలా మటుకు జాబితా రూపంలో ఇవ్వబడుతుంది. <span> విభిన్న శైలులతో. మీరు వాటన్నింటినీ వదిలించుకోవలసి ఉంటుంది. చాలా కలరింగ్ సేవలు శైలులను ఒక స్టైల్ షీట్‌లో మిళితం చేస్తాయి, ఇది తార్కికం, మరియు శైలి పేర్లకు సూచనలను ఉపయోగిస్తాయి. IDEA ఇంకా ఇలా చేయదు, ఇది పనిని కొంత సులభతరం చేస్తుంది (శైలి సెట్టింగ్‌లు నేరుగా లో ఉంటాయి). <span>).
  4. మేము ట్యాగ్‌ని ఉపయోగించి ఫాంట్ రంగును సెట్ చేస్తాము <font>దురదృష్టవశాత్తు, నేపథ్య రంగును సెట్ చేయడం సాధ్యం కాదు.
  5. ఆస్తి font-style:italic దీన్ని రెండు ట్యాగ్‌లుగా మారుద్దాం <i></i>మరియు font-weight:bold - లో <b></b>.
  6. అన్ని ఖాళీలను దీనితో భర్తీ చేయండి &nbsp;.
  7. ఫారమ్‌లో లైన్ బ్రేక్‌లు <br> దీనితో భర్తీ చేయండి n.
  8. IDEAలో HTML మార్కప్‌ను సృష్టించేటప్పుడు, మీకు స్టైల్స్‌తో కూడిన ఖాళీ పంక్తులు మరియు స్టైల్స్‌తో కూడిన స్పేస్‌లు ఉన్న పంక్తులు కనిపిస్తాయి. ఈ స్టైల్స్‌ను తొలగించడం ఉత్తమం: దీనివల్ల కోడ్ పొడవు గణనీయంగా తగ్గి, స్పష్టత మెరుగుపడుతుంది.
  9. లైన్ బ్రేక్‌లకు ఎలాంటి స్టైల్ లేకుండా చూసుకుంటాము. లేకపోతే, ఖాళీ లైన్లతో సమస్యలు తలెత్తుతాయి.

చివరి అంశాన్ని నేను ఒక ఉదాహరణతో వివరిస్తాను:

<code>
1<font color="000000">
</font>2
</code>

ఈ కోడ్ హబ్ర్ ద్వారా మార్చబడుతుంది 12ట్యాగ్‌లకు కూడా ఇదే వర్తిస్తుంది. <b> и <i>అలాగే వాటి ఏవైనా కలయికలు. లైన్ బ్రేక్‌లు స్టైల్ లేకుండా ఉండాలి, అప్పుడు అంతా సవ్యంగా ఉంటుంది.

అమలు

మొదట్లో, ఏదేని HTML కోడ్ కోసం కన్వర్టర్‌ను రాయడం చాలా సవాలుగా అనిపించింది. అయితే, మీరు పరిష్కారాన్ని ఒక నిర్దిష్ట HTML వేరియంట్‌కు అనుగుణంగా మార్చుకుంటే, పనులు అంత కష్టంగా ఉండవు. నేను HTMLను పార్స్ కూడా చేయకుండా, కేవలం RegExpను ఉపయోగించి అన్నీ చేయగలిగాను. "Habr" మార్కప్ యొక్క ప్రత్యేకతలను గుర్తించడమే అసలైన సవాలుగా తేలింది.

లైన్ బ్రేక్‌లపై స్టైల్స్‌ను నివారించడానికి, నేను కొన్ని చాలా క్లిష్టమైన ప్రత్యామ్నాయాలను చేయవలసి వచ్చింది, ఇవి బహుశా అత్యంత గందరగోళంగా ఉంటాయి (పాప్‌అప్ బిఆర్ ఫంక్షన్‌ను చూడండి). దీని ఉద్దేశ్యం ట్యాగ్‌లను తయారు చేయడం <br> ప్రతి భర్తీ తర్వాత, అవి ఫార్మాటింగ్ ట్యాగ్‌ల లోతుల నుండి "బయటపడ్డాయి". అందువల్ల, అన్ని భర్తీల తర్వాత, ట్యాగ్ <br> ఫార్మాటింగ్ పరిధికి వెలుపల ఉన్నట్లు కనిపిస్తోంది.

అంతేకాకుండా, IDEA క్లిప్‌బోర్డ్‌లోకి రిచ్ టెక్స్ట్‌ను మాత్రమే కాకుండా, వంటి చాలా క్లిష్టమైన ఆబ్జెక్ట్‌లను కూడా ఉంచుతుందని తేలింది. application/x-java-jvm-local-objectrefసమస్య ఏమిటంటే, క్లిప్‌బోర్డ్‌లో అలాంటి ఆబ్జెక్ట్‌లు ఉండటం వల్ల, డేటాఫ్లేవర్‌ను నిర్మించడం గురించి నా కన్సోల్‌లో నిరంతరం లోపాలు వస్తున్నాయి. దురదృష్టవశాత్తు, దీని గురించి నేను ఏమీ చేయలేను: JDK క్లిప్‌బోర్డ్‌ను నిర్వహించే విధానం అంతే. అటువంటి కోడ్చూస్తుంటే, దీన్ని రాసిన తెలివైన వాళ్ళు ఇది సరిపోతుందని అనుకుంటున్నారు. ఒక్క మాటలో చెప్పాలంటే, ఈ టూల్‌తో పనిచేసేటప్పుడు తలెత్తే పొరపాట్ల గురించి ఆందోళన చెందకండి.

ఈ ప్రాజెక్ట్ కోట్లిన్‌లో వ్రాయబడింది మరియు కొనసాగుతోంది గ్యాలరీలు.

మెరుగుదల కోసం సూచనలను మేము ఎంతగానో స్వాగతిస్తాము! ఉదాహరణకు, ఈ టూల్‌ను IDEA కోసం ఒక ప్లగిన్‌గా అమలు చేస్తే చాలా బాగుంటుంది. దీన్ని చేయడానికి నాకు ఇంకా ఒక సులభమైన మార్గం దొరకలేదు: దురదృష్టవశాత్తు, 'కాపీ యాజ్ HTML' ప్లగిన్ క్లోజ్డ్ సోర్స్, మరియు అలాంటి ప్లగిన్‌ను మొదటి నుండి ఎలా రాయాలో కనుక్కోవడానికి చాలా సమయం పడుతుంది.

నమోదు చేసుకున్న వినియోగదారులు మాత్రమే సర్వేలో పాల్గొనగలరు. సైన్ ఇన్ చేయండిదయచేసి.

హబ్ర్ ఆర్టికల్స్‌లో కోడ్‌కు సరైన రంగు వేయడం మీకు ముఖ్యమా?

  • లేదు, నేను సాధారణంగా కోడ్ చదవను.

  • లేదు, ప్రామాణిక రంగు సరిపోతుంది.

  • అవును, ప్రముఖ IDEలలో ఉన్నట్లుగా నాకు కోడ్ కలరింగ్ కావాలి.

  • అవును, నేను ఒక వ్యాసం చదివేటప్పుడు రంగుల అమరికను నా అంతట నేనే మార్చుకోవాలనుకుంటున్నాను.

154 మంది వినియోగదారులు ఓటు వేశారు. 16 మంది వినియోగదారులు దూరంగా ఉన్నారు.

మూలం: www.habr.com

ఒక వ్యాఖ్యను జోడించండి