### Install mohtml Python Package Source: https://github.com/koaning/mohtml/blob/main/README.md This snippet provides the command to install the `mohtml` Python library. Users can use either `uv` or `pip` to add the package to their environment, enabling the use of its HTML DSL features. ```Python uv pip install mohtml ``` -------------------------------- ### Run Web Application Source: https://github.com/koaning/mohtml/blob/main/docs/index.html This standard Python `if __name__ == "__main__"` block ensures that the `app.run()` method is called only when the script is executed directly. This is the entry point for starting the web application. ```Python if __name__ == "__main__": app.run() ``` -------------------------------- ### Example HTML Output from mohtml DSL Source: https://github.com/koaning/mohtml/blob/main/README.md This HTML snippet represents the direct output generated by the preceding `mohtml` Python code. It showcases how the Python function calls and nested structure translate into standard HTML tags, attributes, and content, demonstrating the DSL's effectiveness in producing valid HTML. ```HTML

welcome to my blog

my name is vincent

please check my site
``` -------------------------------- ### Python Project Dependencies Source: https://github.com/koaning/mohtml/blob/main/requirements.txt This snippet lists the Python packages and their minimum versions that are necessary for the /koaning/mohtml project to function correctly. These dependencies are typically installed using `pip` from a `requirements.txt` file. ```Python beautifulsoup4>=4.12.0 markdown>=3.5.0 jinja2 ``` -------------------------------- ### Define Custom HTML Representation for Python Objects in Marimo Source: https://github.com/koaning/mohtml/blob/main/docs/index.html This Marimo cell defines a `CoolCat` Python class with a `_display_` method. This special method allows Marimo (and other tools like IPython) to render a custom HTML representation of the object when it's displayed. The example constructs a `div` with an image, name, nickname, and description, styled with Tailwind CSS classes, and demonstrates stacking multiple instances using `mo.hstack`. ```python @app.cell def _(div, mo, p): from mohtml import img, span class CoolCat: def __init__(self, name, nickname, desc, avatar): self.name = name self.nickname = nickname self.desc = desc self.avatar = avatar def _display_(self): return div( div( span(self.name, klass="text-xl font-bold text-black"), span(" - "), span(self.nickname, klass="text-gray-700"), ), img(src=self.avatar, klass="rounded-lg"), p(self.desc, klass="text-sm text-gray-900 pt-4"), klass="bg-gray-200 rounded-lg p-4" ) def __str__(self): return str(self._display_()) mo.hstack([ CoolCat( name="tank", nickname="the hunter", desc="takes a blue pill ``` -------------------------------- ### Initialize Marimo Application in Python Source: https://github.com/koaning/mohtml/blob/main/docs/index.html This Python code initializes a Marimo application, setting its width to 'medium'. It imports the `marimo` library and creates an `app` instance, which serves as the entry point for defining interactive cells and content within a Marimo notebook. ```python import marimo __generated_with = "0.12.8" app = marimo.App(width="medium") ``` -------------------------------- ### Create Interactive HTML Code Editor with Initial Content Source: https://github.com/koaning/mohtml/blob/main/docs/index.html This `app.cell` function defines a web application component that creates an interactive code editor. It initializes the editor with a multi-line HTML string containing a `` tag with a 'dark' theme and 'hello world' content. The `mo.ui.code_editor` function is used to render the editor, configured for HTML language. ```Python @app.cell(hide_code=True) def _(mo): start_value = """ hello world """ editor = mo.ui.code_editor(language="html", value=start_value) editor return editor, start_value ``` -------------------------------- ### Generate HTML Content with mohtml in Marimo Source: https://github.com/koaning/mohtml/blob/main/docs/index.html This Marimo cell demonstrates how to use the `mohtml` library to programmatically generate HTML structures within a Marimo application. It imports specific HTML tags like `div`, `h1`, `p`, `a`, and `script`, then constructs a simple blog post layout, including a link to Tailwind CSS CDN and applying classes for styling. ```python @app.cell def _(): import marimo as mo return (mo,) @app.cell def _(): from mohtml import a, p, div, script, h1 print( div( script(src="https://cdn.tailwindcss.com"), h1("welcome to my blog", klass="font-bold text-xl"), p("my name is vincent", klass="text-gray-500 text-sm"), a("please check my site", href="https://calmcode.io", klass="underline") ) ) return a, div, h1, p, script @app.cell def _(a, div, h1, p, script): div( script(src="https://cdn.tailwindcss.com"), h1("welcome to my blog", klass="font-bold text-4xl"), p("my name is vincent", klass="text-gray-500 text-sm"), a("please check my site", href="https://calmcode.io", klass="underline") ) return ``` -------------------------------- ### Render mohtml Output in Marimo Source: https://github.com/koaning/mohtml/blob/main/README.md This Python snippet illustrates how to display the HTML generated by `mohtml` within a Marimo notebook or application. It takes an `mohtml` object (represented by `myhtml`) and converts it to a string, which is then passed to Marimo's `mo.Html` component for rendering, allowing dynamic HTML content to be shown in Marimo. ```Python myhtml = div(...) mo.Html(f"{myhtml}") ``` -------------------------------- ### Render Editor Content Using Custom HTML Parser Source: https://github.com/koaning/mohtml/blob/main/docs/index.html This `app.cell` function takes the `editor`'s current value, which is HTML content, and processes it using the `parser` instance. The parsed output is then rendered as Markdown using `mo.md`. This demonstrates how the custom HTML parser integrates with the application to display dynamic content based on user input in the editor. ```Python @app.cell(hide_code=True) def _(editor, mo, parser): mo.md(parser(f""" {editor.value} """)) return ``` -------------------------------- ### Generate HTML using mohtml DSL in Python Source: https://github.com/koaning/mohtml/blob/main/README.md This Python code demonstrates how to construct an HTML document using `mohtml`'s domain-specific language. It imports specific HTML elements as Python functions (e.g., `div`, `h1`, `p`, `a`) and nests them to build a hierarchical structure, applying attributes like `src`, `klass`, and `href` as keyword arguments. The output is an `mohtml` object representing the HTML. ```Python from mohtml import a, p, div, script, h1 div( script(src="https://cdn.tailwindcss.com"), h1("welcome to my blog", klass="font-bold text-xl"), p("my name is vincent", klass="text-gray-500 text-sm"), a("please check my site", href="https://calmcode.io", klass="underline") ) ``` -------------------------------- ### Initialize and Register Custom HTML Parser Component Source: https://github.com/koaning/mohtml/blob/main/docs/index.html This snippet initializes a `CustomHTMLParser` instance and registers a 'terminal' component from `mohtml.components`. This allows the parser to recognize and process `` tags in HTML content. The `register` method is shown in its direct usage, though it's noted it might typically be used as a decorator. ```Python CustomHTMLParser from mohtml.components import terminal parser = CustomHTMLParser() # You would normally use this as a decorator. May change this. parser.register("terminal")(terminal) return CustomHTMLParser, parser, terminal ``` -------------------------------- ### Warn User if JavaScript File Served via File Protocol Source: https://github.com/koaning/mohtml/blob/main/docs/index.html This JavaScript snippet checks if the current page is being served via the `file:` protocol. If so, it displays an alert warning the user that the file needs to be served by an HTTP server to function correctly, which is common for web applications with security or resource loading restrictions. ```javascript if (window.location.protocol === 'file:') { alert('Warning: This file must be served by an HTTP server to function correctly.'); } ``` -------------------------------- ### Display Markdown Content in Marimo Cell Source: https://github.com/koaning/mohtml/blob/main/docs/index.html This Marimo cell uses `mo.md()` to render Markdown text directly within the application. The `hide_code=True` decorator ensures that the source code for this cell is not displayed in the Marimo output, making it suitable for presenting explanatory text or documentation. ```python @app.cell(hide_code=True) def _(mo): mo.md( """ ## Fun representations It is pretty easy to use this tool to build custom representations of objects. Check the demo below. """ ) return ``` -------------------------------- ### Dynamically Resize Iframe to Content Height in JavaScript Source: https://github.com/koaning/mohtml/blob/main/docs/index.html This JavaScript function `__resizeIframe` dynamically resizes an iframe (`obj`) to match the height of its content, accounting for potential horizontal scrollbars. It uses `ResizeObserver` to continuously adjust the iframe's height when its content changes, ensuring the iframe always fits without internal scrollbars. ```javascript function __resizeIframe(obj) { var scrollbarHeight = 20; // Max between windows, mac, and linux function setHeight() { var element = obj.contentWindow.document.documentElement; // If there is no vertical scrollbar, we don't need to resize the iframe if (element.scrollHeight === element.clientHeight) { return; } // Create a new height that includes the scrollbar height if it's visible var hasHorizontalScrollbar = element.scrollWidth > element.clientWidth; var newHeight = element.scrollHeight + (hasHorizontalScrollbar ? scrollbarHeight : 0); // Only update the height if it's different from the current height if (obj.style.height !== `${newHeight}px`) { obj.style.height = `${newHeight}px`; } } // Resize the iframe to the height of the content and bottom scrollbar height setHeight(); // Resize the iframe when the content changes const resizeObserver = new ResizeObserver((entries) => { setHeight(); }); resizeObserver.observe(obj.contentWindow.document.body); } ``` -------------------------------- ### Hide Specific UI Elements with CSS Source: https://github.com/koaning/mohtml/blob/main/docs/index.html This CSS code hides HTML elements with the IDs `save-button` and `filename-input` by setting their `display` property to `none` with `!important` to override other styles. This is typically used to remove unwanted UI components from a page. ```css #save-button { display: none !important; } #filename-input { display: none !important; } ``` === COMPLETE CONTENT === This response contains all available snippets from this library. No additional content exists. Do not make further requests.