HTML से Haml कन्वर्टर

HTML/ERB को Haml में बिना सेटअप के तब्दील करें, सीधे ब्राउज़र में, जिससे Rails डेवलपर्स के लिए कोड क्लीन और मैनेजेबल बनता है।

टैग्स: erb haml html कोड कन्वर्ट करें टेम्पलेट कन्वर्टर रेल्स

🚀 359,331 कुल रूपांतरण (2 इस महीने)

कोडिंग चैलेंज के साथ Python का अभ्यास करें

सीधे इस एडिटर में प्रैक्टिकल समस्याएँ हल करें: सैंपल टेस्ट चलाएँ, सबमिट करें, और AI कोड रिव्यू पाएं।

सभी Python चैलेंज
आसान

Rectangle Perimeter

Compute the perimeter of a rectangle from its sides.

आप सीखेंगे अंकगणितलौटाए गए मान
BeginnerLearning-pathVariables
आसान

Days in a Month

Return how many days a month has, including leap years.

आप सीखेंगे कैलेंडर के नियमसहायक फ़ंक्शन
BeginnerConditionsFunctionsLearning-path
आसान

Distance Between Points

Compute the straight-line distance between two points.

आप सीखेंगे पाइथागोरस प्रमेयवर्गमूल
BeginnerFunctionsLearning-pathmath
आसान

दो वेक्टरों का डॉट प्रोडक्ट

दो वेक्टरों के हर तत्व को आपस में गुणा करके परिणाम जोड़ें, यही हर न्यूरॉन की मूल गणना है।

आप सीखेंगे वेक्टरडॉट प्रोडक्ट
न्यूरल नेटवर्कएआईमशीन लर्निंग
आसान

Average of Three

Average three whole numbers.

आप सीखेंगे अंकगणितभाग
BeginnerLearning-pathVariables
आसान

टू-डू लिस्ट

कामों की लिस्ट संभालें: जोड़ें, पूरा चिह्नित करें, हटाएँ और बताएँ कि क्या बाकी है।

आप सीखेंगे टाइप वाले कलेक्शनरिकॉर्ड
BeginnerSimulationStrings
आसान

मूल संख्या जांचें

निर्धारित करें कि कोई संख्या मूल है या नहीं।

आप सीखेंगे विभाज्यतालूप को तेज़ करना
BeginnerLoopsNumbersStudent-beginner
कठिन

Word Break

Decide whether text can be split into dictionary words.

आप सीखेंगे प्रीफ़िक्स DPटेक्स्ट को शब्दों में बाँटना
AdvancedDynamic-programmingHackathonStrings
आसान

Row Sums

Add up every row of a grid.

आप सीखेंगे 2D सूचियाँनेस्टेड लूप
BeginnerGridsLearning-path
आसान

Count Pairs With a Sum

Count pairs of positions whose values add up to a target.

आप सीखेंगे इंडेक्स के जोड़ेदोहरी गिनती से बचना
ArraysBeginnerLearning-pathNested-loops
आसान

Largest of Three

Pick the largest of three numbers without a built-in max.

आप सीखेंगे तुलनाशर्तें जोड़ना
BeginnerConditionsLearning-path
आसान

गुम संख्या

0 से n तक की श्रेणी में से एक गुम संख्या खोजें।

आप सीखेंगे समांतर श्रेणीयोग के अंतर की ट्रिक
ArraysBeginnerStudent-beginnermath

यह टूल क्या है?

यह मुफ्त ऑनलाइन कन्वर्टर आपको HTML और ERB (एम्बेडेड Ruby) टेम्पलेट्स को तुरंत साफ, पठनीय Haml कोड में बदलने में मदद करता है। यह उन Ruby ऑन रेल्स डेवलपर्स के लिए आदर्श है जो अपने व्यूज़ को सरल और आधुनिक बनाना चाहते हैं।

कैसे उपयोग करें

  1. अपने HTML+ERB कोड को एडिटर में पेस्ट करें या टाइप करें।
  2. Haml उत्पन्न करने के लिए Convert पर क्लिक करें।
  3. Haml परिणाम को तुरंत डाउनलोड करें, कॉपी करें, या साझा करें।

आप अपनी कन्वर्ज़न हिस्ट्री को सहेजने और बाद में फाइलें डाउनलोड करने के लिए Google या GitHub के साथ साइन इन भी कर सकते हैं।

Haml क्यों?

Haml (HTML एब्स्ट्रैक्शन मार्कअप लैंग्वेज) एक व्हाइटस्पेस-सेंसिटिव टेम्पलेटिंग इंजन है जो Ruby के लिए है, जो आमतौर पर रेल्स में उपयोग किया जाता है। यह इनलाइन HTML को साफ, इंडेंटेड सिंटैक्स के साथ बदलता है जो पढ़ने और बनाए रखने में आसान होता है।

Haml के लाभ शामिल हैं:

  • ERB की तुलना में साफ और छोटा सिंटैक्स
  • बेहतर पठनीयता और रखरखाव
  • रेल्स डेवलपर्स के लिए तेज़ फ्रंट-एंड टेम्पलेटिंग

Haml का उपयोग कई Ruby शॉप्स और डेवलपर्स द्वारा तेजी से रेल्स विकास के लिए किया जाता है, जिसमें Unspace Interactive शामिल है।

आधिकारिक Haml वेबसाइट पर और जानें।

Haml सिंटैक्स उदाहरण


%section.container
  %h1= post.title
  %h2= post.subtitle
  .content
    = post.content

    

HTML+ERB बनाम Haml उदाहरण

HTML+ERB


<!doctype html>
<html>
  <head>
    <meta charset="utf-8"/>
  </head>
  <body>
    <h1>Blogg</h1>
    <p>समय: <%%= Time.now %%></p>
    <%% Post.all.each do |post| %%>
      <article>
        <h2><%%= post.title %%></h2>
        <div><%%= post.body %%></div>
      </article>
    <%% end %%>
  </body>
</html>

Haml


!!!
%html
  %head
    %meta{ content: "text/html; charset=UTF-8", "http-equiv": "Content-Type" }/
    %meta{ charset: "utf-8" }/
  %body
    %h1 Blogg
    %p
      समय:
      \#{Time.now}
    - Post.all.each do |post|
      %article
        %h2= post.title
        %div= post.body