Custom Markup Language - README
This project is a parser/interpreter for a custom markup language that converts structured text into HTML. The language provides a simplified syntax for defining web page elements such as headings, paragraphs, images, buttons, and other HTML components.
Features
- Converts custom markup structures into valid HTML.
- Supports attributes and inline styles.
- Supports nesting of elements.
- Handles self-closing tags like img, input, meta, and link.
- Allows defining text content within elements.
Requirements
No special requirements beyond Python for this parser.
Extension Settings
This project does not add any specific VS Code settings but can be used with any IDE to write or test the custom markup language.
Syntax
The custom markup language follows a block-based syntax where elements are enclosed within curly braces {}.
Example Syntax:
page {
head {
title { text: My Website; }
}
body {
heading1 { text: Welcome!; }
para { text: This is a custom markup language. }
}
}
Equivalent HTML Output:
html
Copy
<html>
<head>
<title>My Website</title>
</head>
<body>
<h1>Welcome!</h1>
<p>This is a custom markup language.</p>
</body>
</html>
Language Components
Tags and Mappings
The parser maps custom tags to equivalent HTML elements. Below are some of the mappings:
Custom Tags to HTML Mappings:
Custom Tag: page → HTML Tag: <html>
Custom Tag: head → HTML Tag: <head>
Custom Tag: body → HTML Tag: <body>
Custom Tag: heading1 → HTML Tag: <h1>
Custom Tag: heading2 → HTML Tag: <h2>
Custom Tag: heading3 → HTML Tag: <h3>
Custom Tag: para → HTML Tag: <p>
Custom Tag: link → HTML Tag: <a>
Custom Tag: image → HTML Tag: <img>
Custom Tag: btntag → HTML Tag: <button>
Custom Tag: list → HTML Tag: <ul>
Custom Tag: item → HTML Tag: <li>
Custom Tag: bold → HTML Tag: <strong>
Custom Tag: italic → HTML Tag: <em>
Custom Tag: form → HTML Tag: <form>
Custom Tag: input → HTML Tag: <input>
Custom Tag: video → HTML Tag: <video>
Custom Tag: audio → HTML Tag: <audio>
Custom Tag: table → HTML Tag: <table>
Custom Tag: row → HTML Tag: <tr>
Custom Tag: cell → HTML Tag: <td>
Custom Tag: headcell → HTML Tag: <th>
Custom Tag: linktag → HTML Tag: <link>
Custom Tag: metatag → HTML Tag: <meta>
Custom Tag: title → HTML Tag: <title>
Custom Tag: base → HTML Tag: <base>
Parsing Attributes
Attributes can be defined using key-value pairs separated by colons. The parser extracts and converts these attributes into valid HTML attributes.
Example:
plaintext
Copy
btntag {
text: Click Me;
class: my-button;
style: background-color: red, color: white;
}
Equivalent HTML:
html
Copy
<button class="my-button" style="background-color: red; color: white;">Click Me</button>
Handling Styles
Styles are written in a comma-separated format and converted into valid CSS styles within a style attribute.
Example:
plaintext
Copy
para {
text: This is a paragraph;
style: font-size: 14px, color: blue;
}
Equivalent HTML:
html
Copy
<p style="font-size: 14px; color: blue;">This is a paragraph</p>
Self-Closing Tags
Elements like img, input, meta, link, and base are automatically treated as self-closing tags.
Example:
plaintext
Copy
image {
src: "image.png";
alt: "An image";
}
Equivalent HTML:
html
Copy
<img src="https://github.com/Rizwan-khan-00786/mynpllanguage/blob/main/image.png" alt="An image" />
Running the Parser
To use the parser, save the script as parser.py and run it with a custom markup file.
Example Usage:
python
Copy
if __name__ == "__main__":
sample_markup = """
page {
head {
title { text: My Website; }
}
body {
heading1 { text: Welcome!; }
para { text: This is a custom markup language. }
}
}
"""
html_output = convert_markup_to_html(sample_markup)
print(html_output)
with open("output.html", "w") as file:
file.write(html_output)
After execution, an output.html file will be generated with the equivalent HTML.
Known Issues
Currently, the parser does not support more complex CSS features like animations and media queries.
Nested structures may not be fully optimized yet.
Release Notes
1.0.0
Initial release of the custom markup language parser.
1.0.1
Fixed some minor bugs with attribute parsing.
1.1.0
Added support for self-closing tags and basic inline styles.
Working with Markdown
You can author your README using Visual Studio Code. Here are some useful editor keyboard shortcuts:
Split the editor (Cmd+\ on macOS or Ctrl+\ on Windows and Linux).
Toggle preview (Shift+Cmd+V on macOS or Shift+Ctrl+V on Windows and Linux).
Press Ctrl+Space (Windows, Linux, macOS) to see a list of Markdown snippets.
For more information
Visual Studio Code's Markdown Support
Markdown Syntax Reference
Developed with ❤️ by [Khan Rizwan Amjad]
less
Copy
### Key Updates:
- **Custom Tags to HTML Mappings**: Aapka jo table tha, usse replace kar diya gaya hai ab directly list ke form mein diya gaya hai.
Agar abhi bhi koi clarification ya aur update chahiye ho, toh zaroor batayein!
