डेवलपर टूल · HTML इकाई एस्केपर
वेब पेज पर HTML कोड कैसे दिखाएं: प्री और कोड ब्लॉक के अंदर < से बचना
· यह काम किस प्रकार करता है
HTML डेवलपर-वर्कफ़्लो एन्कोडिंग
<pre> ब्लॉक पार्सर को टैग पढ़ने से नहीं रोकता है, इसलिए कोड नमूनों से बचना चाहिए। यह पोस्ट सटीक रूप से दिखाती है कि किन वर्णों को परिवर्तित करना है, कैसे एक नमूने में </script> अभी भी एक स्क्रिप्ट को समाप्त करता है, और नमूने को पढ़ने योग्य कैसे रखा जाए।
ट्यूटोरियल जिसका उदाहरण एक कार्यशील रूप में प्रस्तुत किया गया है - क्यों <pre> एक कच्चा-पाठ तत्व नहीं है
ट्यूटोरियल जिसका उदाहरण एक कार्यशील रूप में प्रस्तुत किया गया है - क्यों <pre> एक कच्चा-पाठ तत्व नहीं है। पूर्व तत्व रिक्त स्थान को सुरक्षित रखता है लेकिन सामान्य HTML पार्सिंग संदर्भ बना रहता है। इसके अंदर एक शाब्दिक बटन टैग एक बटन बनाता है, इसलिए केवल इंडेंटेशन कभी भी मार्कअप को स्रोत कोड में नहीं बदलता है।
वेबपेज पर HTML कोड प्रदर्शित करने की पुष्टि करने के लिए, एक ट्यूटोरियल बनाएं जिसका उदाहरण एक तकनीकी लेखक के लिए हो जिसका कोड नमूना लाइव बटन के रूप में प्रस्तुत होता है। कार्यशील के रूप में प्रस्तुत संरक्षित, जबकि कोड-सैंपल रेंडरिंग फॉर्म उत्पन्न करता है कि प्री क्यों है; पहचानें कि कच्चा पाठ कहाँ उपयोग किया जाता है। तत्व के बारे में अवलोकन केवल HTML पाठ से संबंधित है।
कोड नमूने में कौन से वर्णों से बचना है - < और & कम से कम, > समरूपता के लिए, केवल विशेषताओं में उद्धरण
कोड नमूने में कौन से वर्णों से बचना है - < और & कम से कम, > समरूपता के लिए, केवल विशेषताओं में उद्धरण। प्री या कोड टेक्स्ट के अंदर, कम-से-कम और एम्परसेंड आवश्यक प्रतिस्थापन हैं। ToolAcre ग्रेटर-दैन और दोनों उद्धरणों को एन्कोड करता है, जिससे एक सुसंगत पांच-वर्ण नीति तैयार होती है।
एक तकनीकी लेखक जिसका कोड नमूना लाइव बटन के रूप में प्रस्तुत होता है, वह परीक्षण कर सकता है कि कोड-नमूना रेंडरिंग पास होने से पहले कोड नमूने में रिकॉर्ड करके कौन से वर्णों से बचना है। तुलना करें और कम से कम बाद में समरूपता उद्धरणों के लिए जिम्मेदार पार्सर का पता लगाएं। यह वेबपेज परिणाम पर HTML कोड प्रदर्शित करता है जो विशेषताओं की व्याख्या करता है, निष्पादन योग्य संदर्भों की नहीं।
</script> जाल - क्यों एक बचा हुआ नमूना <pre> में सुरक्षित है, लेकिन <script> के अंदर एक शाब्दिक स्क्रिप्ट तत्व को समाप्त करता है
</script> जाल - क्यों एक बचा हुआ नमूना <pre> में सुरक्षित है लेकिन <script> के अंदर एक शाब्दिक स्क्रिप्ट तत्व को समाप्त करता है। स्क्रिप्ट विभिन्न समाप्ति नियमों वाला एक कच्चा-पाठ तत्व है। इकाई संदर्भ वहाँ एक सार्वभौमिक पलायन नहीं हैं, और एक स्क्रिप्ट तत्व को बंद करने वाले शाब्दिक अनुक्रम के लिए JavaScript-जागरूक क्रमबद्धता या वास्तुशिल्प परिहार की आवश्यकता होती है।
एक संक्षिप्त कोड-नमूना रेंडरिंग नमूने में स्क्रिप्ट ट्रैप को अलग करें। दिखाएँ कि एक बचा हुआ नमूना शाब्दिक स्रोत के रूप में है, पूर्व में सुरक्षित लेकिन उसके गंतव्य तक का पालन करें, और अंदर एक शाब्दिक पढ़ने वाले API को नाम दें। वेबपेज पर HTML कोड प्रदर्शित करने के लिए, स्क्रिप्ट समाप्त हो जाती है, स्क्रिप्ट पार्सर-बाउंड साक्ष्य बनी रहती है।
कारगर उदाहरण: दस-पंक्ति HTML स्निपेट से बचना - पहले और बाद में, और प्रस्तुत परिणाम
व्यावहारिक उदाहरण: दस-पंक्ति HTML स्निपेट से बचना - पहले और बाद में, और प्रस्तुत परिणाम। <form><button>Save</button></form> से शुरू होने वाला एक बहुपंक्ति नमूना <form><button>Save</button></form> हो जाता है, जबकि इसके लाइन ब्रेक और टैब बिल्कुल संरक्षित होते हैं।
कार्यान्वित उदाहरण को एक सीमा प्रयोग के रूप में भागने पर विचार करें। एक तकनीकी लेखक जिसका कोड नमूना लाइव बटन के रूप में प्रस्तुत होता है, उसे दस लाइन HTML स्निपेट बनाए रखना चाहिए, एक कोड-नमूना रेंडरिंग ऑपरेशन करना चाहिए, और प्रस्तुत परिणाम को बदलने से पहले और बाद में और चरित्र द्वारा चरित्र का निरीक्षण करना चाहिए। कोड-सैंपल रेंडरिंग साक्ष्य के बारे में दावा इस HTML परत पर रुकता है।
स्थैतिक साइट जनरेटर और मार्कडाउन फेंसिड ब्लॉक - जहां पलायन स्वचालित रूप से होता है और जहां नहीं होता है
स्थैतिक साइट जनरेटर और मार्कडाउन फेंसिड ब्लॉक - जहां पलायन स्वचालित रूप से होता है और जहां नहीं होता है। कई मार्कडाउन और स्टैटिक-साइट पाइपलाइन स्वचालित रूप से फेंसिड कोड से बच जाते हैं। उस चरण से पहले भागने से दृश्यमान &lt; बन जाता है, इसलिए एकल भागने वाली सीमा के स्वामित्व का दस्तावेजीकरण किया जाना चाहिए।
ग्राहक सामग्री के बजाय हानिरहित इनपुट के साथ स्थैतिक साइट जनरेटर को पुन: प्रस्तुत करें। मार्कडाउन फेंसिड ब्लॉकों को रिकॉर्ड करें, जहां से बचना स्वचालित रूप से होता है और प्रत्येक जानबूझकर कोड-सैंपल रेंडरिंग पास को गिनें। वेबपेज ट्रेल पर HTML कोड प्रदर्शित करने से एक तकनीकी लेखक को, जिसका कोड नमूना एक लाइव बटन के रूप में प्रस्तुत होता है, मूल्यांकन करता है कि यह कहाँ नहीं होता है और अनुमान लगाए बिना कोड-नमूना प्रस्तुत करने वाले साक्ष्य देता है।
सामान्य गलतियाँ - मार्कडाउन पाइपलाइन में दो बार भाग जाना, और नमूने के अंदर URL को भूल जाना
सामान्य गलतियाँ - मार्कडाउन पाइपलाइन में दो बार भाग जाना, और नमूने के अंदर URL को भूल जाना। नमूनों के अंदर दिखाए गए URL में एम्परसेंड होते हैं जिन्हें रूपांतरण की भी आवश्यकता होती है। संपूर्ण स्निपेट को एक बार चलाना मैन्युअल रूप से कोण ब्रैकेट बदलने और एम्परसेंड को कहीं और देखने की तुलना में अधिक सुरक्षित है।
कोड-सैंपल रेंडरिंग समीक्षा के दौरान दो बार होने वाली सामान्य गलतियों को मार्कडाउन पाइपलाइन में रखें, और URL में भूलने को साथ-साथ रखें। एक तकनीकी लेखक जिसका कोड नमूना लाइव बटन के रूप में प्रस्तुत होता है, वह यह तय कर सकता है कि नमूने के अंदर रूपांतरण या डाउनस्ट्रीम में बदलाव हुआ है या नहीं। सामान्य सुरक्षा दावों से बाहर कोड-नमूना प्रतिपादन साक्ष्य के बारे में वेबपेज निष्कर्ष पर प्रदर्शन HTML कोड रखें।
इसमें क्या शामिल नहीं है - सिंटैक्स हाइलाइटिंग लाइब्रेरीज़ और लाइन नंबरिंग
इसमें क्या शामिल नहीं है - सिंटैक्स हाइलाइटिंग लाइब्रेरीज़ और लाइन नंबरिंग। सिंटैक्स हाइलाइटर्स और लाइन-नंबर घटक इस ऑपरेशन से बाहर हैं। भागने के बाद वे कोड को टोकनाइज़ कर सकते हैं, लेकिन उनके स्वयं के DOM निर्माण और ट्रस्ट मॉडल की अलग से समीक्षा की आवश्यकता है।
कोड-सैंपल रेंडरिंग चलाने से पहले परिभाषित करें कि यह क्या नहीं करता है। नियंत्रण के रूप में लाइब्रेरीज़ को हाइलाइट करने वाले कवर सिंटैक्स को सहेजें, पीछे के कोड बिंदुओं और लाइन नंबरिंग का निरीक्षण करें, और अगले दुभाषिया को कोड-नमूना रेंडरिंग साक्ष्य मैप करें। यह एक तकनीकी लेखक के लिए कोड-सैंपल रेंडरिंग साक्ष्य को ऑडिट करने योग्य बनाता है, जिसका कोड नमूना वेबपेज पर डिस्प्ले HTML कोड की जांच करने वाले लाइव बटन के रूप में प्रस्तुत होता है।
टेकअवे: HTML टेक्स्ट कंटेनरों के लिए एस्केप स्निपेट, मनमाने ढंग से सम्मिलन बिंदु नहीं
टेकअवे: HTML टेक्स्ट कंटेनरों के लिए एस्केप स्निपेट, मनमाने ढंग से सम्मिलन बिंदु नहीं। HTML प्री या कोड तत्व के लिए स्रोत टेक्स्ट बनाने के लिए टूल का उपयोग करें, मनमाने सम्मिलन बिंदुओं के लिए नहीं। परिणाम अभी भी संदर्भ-विशिष्ट HTML पाठ है, कभी भी सार्वभौमिक सुरक्षित स्ट्रिंग नहीं।
अवलोकन योग्य कोड-सैंपल रेंडरिंग आउटपुट के लिए टेकअवे एस्केप स्निपेट्स को कनेक्ट करें। HTML टेक्स्ट कंटेनरों को वन-पास परिणाम के बगल में न रखें, फिर सत्यापित करें कि मनमाने ढंग से सम्मिलन बिंदु कोड-नमूना रेंडरिंग साक्ष्य में कहां प्रवेश करते हैं। एक तकनीकी लेखक जिसका कोड नमूना लाइव बटन के रूप में प्रस्तुत होता है, अब वेबपेज खोज पर एक संकीर्ण प्रदर्शन HTML कोड के रूप में कोड-नमूना प्रतिपादन साक्ष्य की समीक्षा कर सकता है। इस आलेख के पीछे व्यावहारिक निर्णय विशिष्ट है: एक <pre> ब्लॉक पार्सर को टैग पढ़ने से नहीं रोकता है, इसलिए कोड नमूने से बचना चाहिए। यह पोस्ट सटीक रूप से दिखाती है कि किन वर्णों को परिवर्तित करना है, कैसे एक नमूने में </script> अभी भी एक स्क्रिप्ट को समाप्त करता है, और नमूने को पढ़ने योग्य कैसे रखा जाए। पाठक की कार्रवाई समान रूप से ठोस है: HTML इकाई एस्केपर से लिंक और <pre> ब्लॉक के अंदर उपयोग के लिए एक मल्टी-लाइन HTML स्निपेट से बचने का प्रदर्शन करता है।