#{node.literal}#{node.literal}"}
end)
end
end
```
--------------------------------
### Convert Markdown to Delta with Custom Converters
Source: https://github.com/leandrocp/mdex/blob/main/usage-rules.md
Use `custom_converters` when a node should map to custom Delta operations. This example shows how to map an `MDEx.Image` node to a Delta insert operation.
```elixir
MDEx.to_delta!(markdown,
custom_converters: %{
MDEx.Image => fn image, _opts ->
[%{"insert" => %{"image" => image.url}}]
end
}
)
```
--------------------------------
### Custom Highlight Styling for Lines
Source: https://github.com/leandrocp/mdex/blob/main/guides/code_block_decorators.md
Customize the appearance of highlighted lines using 'highlight_lines_style' with inline CSS. This example sets a yellow background and bold font weight.
```ruby
class User
def initialize(name)
@name = name
end
end
```
--------------------------------
### Define Custom Code Fence Renderers
Source: https://github.com/leandrocp/mdex/blob/main/usage-rules.md
Use `codefence_renderers:` to specify custom rendering logic for specific code fence info strings. This example defines a renderer for 'chart' code fences.
```elixir
MDEx.to_html!(markdown,
codefence_renderers: %{
"chart" => fn _lang, _meta, code -> SvgCharts.render!(code) end
}
)
```
--------------------------------
### Update AST Nodes in MDEx Document
Source: https://github.com/leandrocp/mdex/blob/main/usage-rules.md
Modify nodes within an MDEx Document using `MDEx.Document.update_nodes/3`. This example converts all text literals to uppercase.
```elixir
document =
markdown
|> MDEx.parse_document!()
|> MDEx.Document.update_nodes(MDEx.Text, fn node ->
%{node | literal: String.upcase(node.literal)}
end)
```
--------------------------------
### Highlight Specific Lines in Code
Source: https://github.com/leandrocp/mdex/blob/main/guides/code_block_decorators.md
Highlight individual lines or ranges of lines in a code block using the 'highlight_lines' decorator. This example targets lines 1, 4, 5, and 6.
```python
import math
def calculate(x):
result = x * 2
# return calculated result
return math.sqrt(x)
```
--------------------------------
### Manipulate Markdown Document Structure
Source: https://github.com/leandrocp/mdex/blob/main/usage-rules.md
Use MDEx.Document functions to modify document options, render options, plugins, and content. This example demonstrates chaining multiple document manipulation functions.
```elixir
doc =
MDEx.new(markdown: "# Title")
|> MDEx.Document.put_options(extension: [table: true])
|> MDEx.Document.put_render_options(unsafe: true)
|> MDEx.Document.append_steps(custom_step: &my_transform/1)
html = MDEx.to_html!(doc)
```
--------------------------------
### Generate Random Dad Joke in Elixir
Source: https://github.com/leandrocp/mdex/blob/main/examples/posts/2025-02-07-example-post.md
This Elixir module defines a function to randomly select and return a dad joke from a predefined list. No external setup is required.
```elixir
defmodule DadJoke do
def random() do
Enum.random([
"Never fight dinosaurs. You’ll get Jurasskicked",
"A lion would never play golf. But a tiger wood",
"What do runners eat? Nothing, cause they fast."
])
end
end
```
--------------------------------
### Initialize MDEx with Custom Options
Source: https://github.com/leandrocp/mdex/blob/main/usage-rules.md
Use `MDEx.new/1` as the entry point for pipelines, plugins, streaming, assigns, and reusable option sets. This allows for detailed configuration of extensions and syntax highlighting.
```elixir
doc =
MDEx.new(
markdown: markdown,
extension: [table: true],
syntax_highlight: [engine: :lumis, opts: [formatter: {:html_inline, theme: "github_light"}]]
)
```
--------------------------------
### MDEx.new/1
Source: https://github.com/leandrocp/mdex/blob/main/usage-rules.md
Use this as the entrypoint for pipelines, plugins, streaming, assigns, and reusable option sets. It allows for detailed configuration of extensions and syntax highlighting.
```APIDOC
## MDEx.new/1
Use this as the entrypoint for pipelines, plugins, streaming, assigns, and reusable option sets.
```elixir
doc =
MDEx.new(
markdown: markdown,
extension: [table: true],
syntax_highlight: [engine: :lumis, opts: [formatter: {:html_inline, theme: "github_light"}]]
)
```
```
--------------------------------
### Basic Streaming Usage
Source: https://github.com/leandrocp/mdex/blob/main/guides/streaming.md
Demonstrates how to create a streaming document, append markdown chunks, and render HTML incrementally. The parser handles unclosed syntax like bold markers.
```elixir
doc = MDEx.new(streaming: true)
# First chunk -- unclosed bold marker
doc = MDEx.Document.put_markdown(doc, "**Fol")
MDEx.to_html!(doc)
#=> "Fol
" # Second chunk closes it doc = MDEx.Document.put_markdown(doc, "low**") MDEx.to_html!(doc) #=> "Follow
" ``` -------------------------------- ### Enable Lumis for Rendering Source: https://github.com/leandrocp/mdex/blob/main/guides/code_block_decorators.md Enable Lumis for syntax highlighting with the :html_inline formatter. ```elixir syntax_highlight: [engine: :lumis, opts: [formatter: :html_inline]] ``` -------------------------------- ### Apply Plugins for One-Off Rendering Source: https://github.com/leandrocp/mdex/blob/main/usage-rules.md Pass plugins directly to MDEx.to_html! for one-off rendering tasks. This is suitable when plugins are not needed for subsequent operations. ```elixir MDEx.to_html!(markdown, plugins: [MDExGFM]) ``` -------------------------------- ### Create a Reusable Markdown Pipeline Source: https://github.com/leandrocp/mdex/blob/main/usage-rules.md To create a reusable Markdown processing pipeline, use `MDEx.new/1`, attach plugins, append steps, and then render the content. ```elixir MDEx.new/1 ``` -------------------------------- ### MDEx Streaming Options Source: https://github.com/leandrocp/mdex/blob/main/guides/streaming.md Demonstrates how to configure MDEx for streaming with additional options like extensions, rendering settings, and syntax highlighting. This allows for customized markdown processing. ```elixir MDEx.new( streaming: true, extension: [strikethrough: true, table: true, tasklist: true], render: [unsafe: true], syntax_highlight: [engine: :lumis, opts: [formatter: {:html_inline, theme: "github_light"}]] ) ``` -------------------------------- ### Use MDEx for Static Content Source: https://github.com/leandrocp/mdex/blob/main/usage-rules.md For static site or fixed template content, use the `use MDEx` macro combined with `~MD[...]HTML` sigil. ```elixir use MDEx ~MD[...]HTML ``` -------------------------------- ### Attach Plugin with Options via MDEx.new/1 Source: https://github.com/leandrocp/mdex/blob/main/guides/plugins.md Pass plugins with custom options when creating a new MDEx document using a tuple format. ```elixir MDEx.new(markdown: "# Hello", plugins: [{MyPlugin, custom_option: "value"}]) |> MDEx.to_html!() ``` -------------------------------- ### Use MDEx for LiveView Content Source: https://github.com/leandrocp/mdex/blob/main/usage-rules.md For LiveView content with components, use the `use MDEx` macro with the `~MD[...]HEEX` sigil. ```elixir use MDEx ~MD[...]HEEX ``` -------------------------------- ### Enable Render Options for Decorators Source: https://github.com/leandrocp/mdex/blob/main/guides/code_block_decorators.md Enable 'github_pre_lang' and 'full_info_string' render options to use code block decorators. ```elixir render: [ github_pre_lang: true, full_info_string: true ] ``` -------------------------------- ### Create Streaming Document Source: https://github.com/leandrocp/mdex/blob/main/usage-rules.md Use `streaming: true` when creating a document for streaming output. Keep the same document instance across chunks and use `Enum.into/2` to accumulate chunks efficiently. Any `to_*` call flushes the buffer. ```elixir doc = Enum.into(["# Hel", "lo\n\n", "**world**"], MDEx.new(streaming: true)) html = MDEx.to_html!(doc) ``` -------------------------------- ### use MDEx Source: https://github.com/leandrocp/mdex/blob/main/usage-rules.md Use this in modules that use `~MD` or `MDEx.to_heex!/2`. You can pass default sigil options. ```APIDOC ## use MDEx Use this in modules that use `~MD` or `MDEx.to_heex!/2`. ```elixir defmodule MyApp.Content do use MDEx end ``` You can pass default sigil options: ```elixir defmodule MyApp.Content do use MDEx, extension: [strikethrough: true], syntax_highlight: [engine: :lumis, opts: [formatter: {:html_inline, theme: "github_light"}]] end ``` ``` -------------------------------- ### Streaming Markdown Rendering Source: https://github.com/leandrocp/mdex/blob/main/usage-rules.md Initialize MDEx for streaming with `MDEx.new(streaming: true)`. Append Markdown chunks using `MDEx.Document.put_markdown/2` and render intermediate results with `MDEx.to_html!/1`. ```elixir doc = MDEx.new(streaming: true) doc = MDEx.Document.put_markdown(doc, "**Hel") html = MDEx.to_html!(doc) doc = MDEx.Document.put_markdown(doc, "lo**") html = MDEx.to_html!(doc) ``` -------------------------------- ### Piping Chunks for Streaming Source: https://github.com/leandrocp/mdex/blob/main/guides/streaming.md Shows how to use the pipe operator to chain markdown chunks into a streaming document and render the final HTML. This method is concise for sequential chunk processing. ```elixir MDEx.new(streaming: true) |> MDEx.Document.put_markdown("# Hel") |> MDEx.Document.put_markdown("lo\n\nSome ") |> MDEx.Document.put_markdown("**bold** text") |> MDEx.to_html!() #=> "Some bold text
" ``` -------------------------------- ### Attach Plugin via MDEx.to_html/2 Source: https://github.com/leandrocp/mdex/blob/main/guides/plugins.md Conveniently pass plugins directly to rendering functions like MDEx.to_html/2. ```elixir MDEx.to_html!("# Hello", plugins: [MyPlugin]) ``` -------------------------------- ### Configure Rendering Behavior Source: https://github.com/leandrocp/mdex/blob/main/usage-rules.md Use the `render:` option for output behavior adjustments, including enabling unsafe HTML, GitHub-style pre-language detection, full info strings, and hard line breaks. ```elixir render: [ unsafe: true, github_pre_lang: true, full_info_string: true, hardbreaks: true ] ``` -------------------------------- ### Attach Plugin via MDEx.new/1 Source: https://github.com/leandrocp/mdex/blob/main/guides/plugins.md Pass plugins directly when creating a new MDEx document. This is the most common method for integrating plugins. ```elixir MDEx.new(markdown: "# Hello", plugins: [MyPlugin]) |> MDEx.to_html!() ``` -------------------------------- ### Configure Lumis Syntax Highlighter Source: https://github.com/leandrocp/mdex/blob/main/guides/code_block_decorators.md Configure :mdex_native to use Lumis as the syntax highlighter before compiling dependencies. ```elixir config :mdex_native, syntax_highlighter: :lumis ``` -------------------------------- ### Convert Markdown to HTML (MDEx vs Earmark) Source: https://github.com/leandrocp/mdex/blob/main/usage-rules.md Compare direct HTML conversion between MDEx and Earmark. MDEx drops raw HTML by default unless opted in, unlike Earmark. ```elixir # Earmark {:ok, html, _messages} = Earmark.as_html(markdown) # MDEx {:ok, html} = MDEx.to_html(markdown) ``` -------------------------------- ### Parse Markdown to AST (MDEx vs Earmark) Source: https://github.com/leandrocp/mdex/blob/main/usage-rules.md Compare how Earmark and MDEx parse Markdown into Abstract Syntax Trees. Earmark returns HTML-shaped tuples, while MDEx returns a structured `%MDEx.Document{}`. ```elixir # Earmark {:ok, ast, _messages} = Earmark.Parser.as_ast(markdown) # MDEx {:ok, document} = MDEx.parse_document(markdown) ``` -------------------------------- ### Attach Plugin via MDEx.Document.put_plugins/2 Source: https://github.com/leandrocp/mdex/blob/main/guides/plugins.md Manually attach plugins to an existing MDEx document object for more granular control. ```elixir MDEx.new(markdown: "# Hello") |> MDEx.Document.put_plugins([MyPlugin]) |> MDEx.to_html!() ``` -------------------------------- ### Convert Markdown to HTML at Runtime Source: https://github.com/leandrocp/mdex/blob/main/usage-rules.md Use `MDEx.to_html!/2` for runtime Markdown conversion when only HTML output is needed. You can pass options to enable specific extensions. ```elixir MDEx.to_html!("# Hello") ``` ```elixir MDEx.to_html!(markdown, extension: [table: true, strikethrough: true]) ``` -------------------------------- ### Using Enum.into for Streaming Chunks Source: https://github.com/leandrocp/mdex/blob/main/guides/streaming.md Illustrates collecting a list of markdown string chunks into a streaming MDEx document using `Enum.into/2`. This is useful when chunks are already available in a list. ```elixir chunks = ["# Hel", "lo\n\n", "Some **bold** text"] doc = Enum.into(chunks, MDEx.new(streaming: true)) MDEx.to_html!(doc) #=> "Some bold text
" ``` -------------------------------- ### Bang function conversion (MDEx vs Earmark) Source: https://github.com/leandrocp/mdex/blob/main/usage-rules.md Illustrates the equivalent bang functions for direct HTML conversion in MDEx and Earmark. ```elixir # Earmark html = Earmark.as_html!(markdown) # MDEx html = MDEx.to_html!(markdown) ``` -------------------------------- ### Use MDEx in Modules Source: https://github.com/leandrocp/mdex/blob/main/usage-rules.md Include this in modules that utilize `~MD` sigils or `MDEx.to_heex!/2`. You can also pass default sigil options. ```elixir defmodule MyApp.Content do use MDEx end ``` ```elixir defmodule MyApp.Content do use MDEx, extension: [strikethrough: true], syntax_highlight: [engine: :lumis, opts: [formatter: {:html_inline, theme: "github_light"}]] end ``` -------------------------------- ### Enable Markdown Extensions Source: https://github.com/leandrocp/mdex/blob/main/usage-rules.md Configure `extension:` to enable Markdown syntax not enabled by default, such as tables, strikethrough, task lists, autolinks, footnotes, math dollars, and Phoenix HEEx. ```elixir extension: [ table: true, strikethrough: true, tasklist: true, autolink: true, footnotes: true, math_dollars: true, phoenix_heex: true ] ``` -------------------------------- ### Configure MDEx Native for Syntect Syntax Highlighting Source: https://github.com/leandrocp/mdex/blob/main/guides/compilation.md Configure MDEx Native to use Syntect for syntax highlighting. This is an alternative to Lumis and is set via the application configuration. ```elixir config :mdex_native, syntax_highlighter: :syntect ``` -------------------------------- ### Runtime Markdown to HTML Source: https://github.com/leandrocp/mdex/blob/main/usage-rules.md Use `MDEx.to_html!/2` for rendering Markdown content that is only available at runtime. This is suitable for content from databases, user input, or API responses. ```elixir html = MDEx.to_html!(markdown) ``` -------------------------------- ### MDEx Streaming HTML Conversion Source: https://github.com/leandrocp/mdex/blob/main/README.md Demonstrates converting Markdown to HTML in a streaming fashion, useful for large documents or real-time updates. ```elixir iex> MDEx.new(streaming: true) ...> |> MDEx.Document.put_markdown("**Install") ...> |> MDEx.to_html!() "Install
" ``` -------------------------------- ### Attach Plugins to a Reusable Pipeline Source: https://github.com/leandrocp/mdex/blob/main/usage-rules.md Attach plugins to an MDEx document during initialization for reusable pipelines. This allows the same plugin configuration to be used across multiple operations. ```elixir MDEx.new(markdown: markdown) |> MDExGFM.attach() |> MDEx.to_html!() ``` -------------------------------- ### Render Raw HTML with MDEx Source: https://github.com/leandrocp/mdex/blob/main/usage-rules.md Explicitly opt-in to render raw HTML in MDEx. This is necessary if your old code expected raw HTML to be preserved. ```elixir MDEx.to_html!(markdown, render: [unsafe: true]) ``` -------------------------------- ### Enable GFM with MDEx Plugins Source: https://github.com/leandrocp/mdex/blob/main/usage-rules.md Replace Earmark's `gfm: true` option with the `MDExGFM` plugin for GitHub Flavored Markdown features like task lists. ```elixir # Earmark Earmark.as_html!(markdown, gfm: true) # MDEx MDEx.to_html!(markdown, plugins: [MDExGFM], render: [unsafe: true] ) ``` -------------------------------- ### Runtime Markdown to HEEX with Assigns Source: https://github.com/leandrocp/mdex/blob/main/usage-rules.md Use `MDEx.to_heex!/2` when runtime Markdown content needs to be rendered with Phoenix component support or HEEx semantics. Pass any necessary assigns to the function. ```elixir rendered = MDEx.to_heex!(markdown, assigns: assigns) ``` -------------------------------- ### Configure Sanitization Options Source: https://github.com/leandrocp/mdex/blob/main/usage-rules.md Use `sanitize:` with `MDEx.Document.default_sanitize_options()` when allowing raw HTML but requiring safe output. ```elixir sanitize: MDEx.Document.default_sanitize_options() ``` -------------------------------- ### Compile MDEx Native Dependency Manually Source: https://github.com/leandrocp/mdex/blob/main/guides/compilation.md Set the MDEX_NATIVE_BUILD environment variable, fetch dependencies, and compile the native dependency. This is required for older Linux systems or custom builds. ```shell export MDEX_NATIVE_BUILD=1 mix deps.get mix compile ``` -------------------------------- ### Handle LLM Chat Output with MDEx Source: https://github.com/leandrocp/mdex/blob/main/usage-rules.md For LLM chat output, initialize MDEx with `streaming: true` and maintain the document state between chunks. ```elixir MDEx.new(streaming: true) ``` -------------------------------- ### Configure MDEx Native for Lumis Syntax Highlighting Source: https://github.com/leandrocp/mdex/blob/main/guides/compilation.md Add the Lumis dependency and configure MDEx Native to use it for syntax highlighting. This snippet shows the necessary configuration in Elixir. ```elixir {:lumis, "~> 0.1"} ``` ```elixir config :mdex_native, syntax_highlighter: :lumis ``` -------------------------------- ### Enable Legacy Artifacts in MDEx Native Source: https://github.com/leandrocp/mdex/blob/main/guides/compilation.md Configure MDEx Native to use legacy artifacts for older CPUs. Add this configuration to your config.exs file to ensure compatibility with older hardware. ```elixir config :mdex_native, use_legacy_artifacts: true ``` -------------------------------- ### Sanitize User Content with MDEx Source: https://github.com/leandrocp/mdex/blob/main/usage-rules.md Use this configuration for user-provided content to render raw HTML safely. It combines `unsafe: true` with default sanitization options. ```elixir MDEx.to_html!(markdown, render: [unsafe: true], sanitize: MDEx.Document.default_sanitize_options() ) ``` -------------------------------- ### Add Lumis Dependency for Syntax Highlighting Source: https://github.com/leandrocp/mdex/blob/main/README.md Include the :lumis dependency alongside :mdex for syntax highlighting. ```elixir def deps do [ {:mdex, "~> 0.12"}, {:lumis, "~> 0.1"} ] end ``` -------------------------------- ### Configure Parsing Behavior Source: https://github.com/leandrocp/mdex/blob/main/usage-rules.md Use the `parse:` option for parsing behavior tweaks, such as enabling smart punctuation and setting a default info string for code blocks. ```elixir parse: [smart: true, default_info_string: "text"] ``` -------------------------------- ### MDEx.to_html!/2 Source: https://github.com/leandrocp/mdex/blob/main/usage-rules.md Use for runtime Markdown when you only need HTML output. It accepts the Markdown string and optional extensions. ```APIDOC ## MDEx.to_html!/2 Use for runtime Markdown when you only need HTML. ```elixir MDEx.to_html!("# Hello") MDEx.to_html!(markdown, extension: [table: true, strikethrough: true]) ``` ``` -------------------------------- ### Document Pipeline: put_options/2 Source: https://github.com/leandrocp/mdex/blob/main/guides/plugins.md Sets values for previously registered options in an MDEx document. ```elixir Document.put_options(document, theme_color: "blue", enable_feature: true) ``` -------------------------------- ### Include Syntax Token Information Source: https://github.com/leandrocp/mdex/blob/main/guides/code_block_decorators.md Add syntax token names as data attributes using the 'include_highlights' decorator, useful for debugging or custom styling. ```rust let x: i32 = 42; ``` -------------------------------- ### Compile-time Static Markdown to HTML Source: https://github.com/leandrocp/mdex/blob/main/usage-rules.md Use the `~MD` sigil with the `HTML` option for static Markdown content known at compile time when HTML output is desired. Ensure `use MDEx` is present in the module. ```elixir defmodule MyApp.Page do use MDEx def hero do ~MD[ # Hello This is **static** content. ]HTML end end ``` -------------------------------- ### Convert User-Generated Markdown to HTML Source: https://github.com/leandrocp/mdex/blob/main/usage-rules.md To convert user-generated Markdown from a database to HTML, use `MDEx.to_html!/2`. Consider sanitization if raw HTML is enabled. ```elixir MDEx.to_html!/2 ``` -------------------------------- ### Document Pipeline: register_options/2 Source: https://github.com/leandrocp/mdex/blob/main/guides/plugins.md Registers custom option keys within an MDEx document, allowing them to be stored and accessed later. ```elixir Document.register_options(document, [:theme_color, :enable_feature]) ``` -------------------------------- ### Attach Plugin Directly using attach/2 Source: https://github.com/leandrocp/mdex/blob/main/guides/plugins.md Call the plugin's attach/2 function directly on a document object, optionally passing options. ```elixir MDEx.new(markdown: "# Hello") |> MyPlugin.attach(custom_option: "value") |> MDEx.to_html!() ``` -------------------------------- ### Parse Markdown to Document AST Source: https://github.com/leandrocp/mdex/blob/main/usage-rules.md Use `MDEx.parse_document!/2` when you require the full Abstract Syntax Tree (AST) of the Markdown content. It also accepts tagged JSON input. ```elixir doc = MDEx.parse_document!(markdown) ``` ```elixir doc = MDEx.parse_document!({:json, json}) ``` -------------------------------- ### Runtime HEEx Macro Usage Source: https://github.com/leandrocp/mdex/blob/main/guides/heex.md Use `MDEx.to_heex/2` for dynamic content or when the sigil is unavailable. The template is evaluated at runtime. ```elixir def render(assigns) do markdown = fetch_markdown_from_database() MDEx.to_heex!(markdown, assigns: assigns) end ``` -------------------------------- ### Converting HEEx to HTML String Source: https://github.com/leandrocp/mdex/blob/main/guides/heex.md Convert HEEx rendered Markdown to a final HTML string using `MDEx.to_heex/2` followed by `MDEx.to_html/2`. Useful for emails or static pages. ```elixir MDEx.to_heex!(markdown, assigns: assigns) |> MDEx.to_html!() ``` -------------------------------- ### Convert Markdown to HEEX at Runtime Source: https://github.com/leandrocp/mdex/blob/main/usage-rules.md Use `MDEx.to_heex!/2` for runtime Markdown that needs to support Phoenix components or HEEx expressions. This macro automatically enables `extension: [phoenix_heex: true]` and `render: [unsafe: true]`. ```elixir defmodule MyAppWeb.PageLive do use Phoenix.LiveView use MDEx def render(assigns) do markdown = "# {@title}\n\n<.link href={@href}>Open" MDEx.to_heex!(markdown, assigns: assigns) end end ``` -------------------------------- ### MDEx.to_heex!/2 Source: https://github.com/leandrocp/mdex/blob/main/usage-rules.md Use for runtime Markdown that must support Phoenix components or HEEx expressions. It's a macro and requires `use MDEx` or `require MDEx` in scope. It automatically enables `extension: [phoenix_heex: true]` and `render: [unsafe: true]`. ```APIDOC ## MDEx.to_heex!/2 Use for runtime Markdown that must support Phoenix components or HEEx expressions. - `MDEx.to_heex!/2` is a macro, so `use MDEx` or `require MDEx` must be in scope. - It automatically enables `extension: [phoenix_heex: true]` and `render: [unsafe: true]`. - Prefer `~MD[...]HEEX` when the content is static. ```elixir defmodule MyAppWeb.PageLive do use Phoenix.LiveView use MDEx def render(assigns) do markdown = "# {@title}\n\n<.link href={@href}>Open" MDEx.to_heex!(markdown, assigns: assigns) end end ``` ``` -------------------------------- ### Parse Markdown to AST for Transformation Source: https://github.com/leandrocp/mdex/blob/main/usage-rules.md Use `MDEx.parse_document!/2` to obtain the Abstract Syntax Tree (AST) of Markdown content. This allows for programmatic inspection and transformation of the document structure. ```elixir doc = markdown |> MDEx.parse_document!() |> MDEx.Document.update_nodes(MDEx.Text, fn node -> %{node | literal: String.upcase(node.literal)} end) MDEx.to_html!(doc) ``` -------------------------------- ### Render Markdown with HEEx Components Source: https://github.com/leandrocp/mdex/blob/main/usage-rules.md Use this when your Markdown contains Phoenix-specific syntax like function components or HEEx expressions. Ensure the `assigns` variable is in scope. ```elixir def render(assigns) do ~MD""" # {@title} <.button phx-click="save">Save """HEEX end ``` -------------------------------- ### Parse Markdown to a Single Fragment Source: https://github.com/leandrocp/mdex/blob/main/usage-rules.md Use `MDEx.parse_fragment!/1` when you expect a single fragment node that you intend to inject or wrap later. This API is considered experimental. ```elixir heading = MDEx.parse_fragment!("# Title") ``` -------------------------------- ### Enable Specific MDEx Extensions Source: https://github.com/leandrocp/mdex/blob/main/usage-rules.md Enable individual GFM features like tables, strikethrough, and task lists directly using the `extension` option in MDEx. ```elixir MDEx.to_html!(markdown, extension: [table: true, strikethrough: true, tasklist: true]) ``` -------------------------------- ### Document Pipeline: append_steps/2 Source: https://github.com/leandrocp/mdex/blob/main/guides/plugins.md Adds custom processing steps (functions) to the MDEx document pipeline. These steps are executed during rendering. ```elixir Document.append_steps(document, validate: &validate/1, transform: &transform/1 ) ``` -------------------------------- ### Combine Multiple Decorators Source: https://github.com/leandrocp/mdex/blob/main/guides/code_block_decorators.md Combine multiple decorators like 'theme', 'pre_class', 'highlight_lines', and 'include_highlights' to customize code blocks extensively. ```typescript interface User { name: string; // highlighted email: string; // highlighted age?: number; } ``` -------------------------------- ### Disable Syntax Highlighting Source: https://github.com/leandrocp/mdex/blob/main/usage-rules.md Set `syntax_highlight:` to `nil` to disable syntax highlighting. ```elixir syntax_highlight: nil ``` -------------------------------- ### Embedding Phoenix Components in HEEx Markdown Source: https://github.com/leandrocp/mdex/blob/main/guides/heex.md Use Phoenix components directly within your Markdown content. Ensure components are imported or use fully qualified names. ```elixir ~MD""" # Navigation - <.link navigate={~p"/home"}>Home - <.link navigate={~p"/about"}>About <.button phx-click="save">Save Changes` element of a code block using the 'pre_class' decorator.
```javascript
console.log("Hello!");
```
--------------------------------
### Embedding Elixir Expressions in HEEx Markdown
Source: https://github.com/leandrocp/mdex/blob/main/guides/heex.md
Embed Elixir expressions using curly braces `{}` within your HEEx Markdown. This allows for dynamic content generation.
```elixir
~MD"""
Today is _{Calendar.strftime(DateTime.utc_now(), "%B %d, %Y")}_
<%= for item <- @items do %>
- {item.name}: **{item.status}**
<% end %>
"""HEEX
```
=== COMPLETE CONTENT === This response contains all available snippets from this library. No additional content exists. Do not make further requests.