Advanced Portal Designer Documentation
Index

Markdown Content

APD supports Markdown format for content, allowing you to write formatted text using simple syntax that converts to HTML automatically.

Why Markdown?

Markdown offers several advantages:

  • Easy to write: Simple, intuitive syntax
  • Readable source: Clear even without rendering
  • Fast editing: No HTML tags to manage
  • Consistent output: Predictable HTML generation

Setting Up Markdown Content

Creating Markdown Content

  1. Open the Advanced Portal Designer menu page and click Content to open the Content List
  2. Click New
  3. Enter the Content Name
  4. Set Style to "Markdown"
  5. Click the Edit Content action
  6. Write your Markdown
  7. Save

The Markdown Editor

APD opens the source content in an in-page editor (the APD Markdown Editor). The editor lets you write Markdown source and save it back to the record; rendering happens at request time when the content is included via the <?content?> tag. There is no built-in side-by-side live preview — preview the output by hitting the portal action that includes the content.

Markdown Syntax Guide

Headings

# Heading 1
## Heading 2
### Heading 3
#### Heading 4
##### Heading 5
###### Heading 6

Output:

  • <h1> through <h6> tags

Paragraphs

This is a paragraph.

This is another paragraph.
Blank lines separate paragraphs.

Text Formatting

**Bold text**
*Italic text*
***Bold and italic***
~~Strikethrough~~
`Inline code`
Markdown HTML Output
bold <strong>bold</strong>
italic <em>italic</em>
strike <del>strike</del>
code <code>code</code> 
[Link text](https://example.com)
[Link with title](https://example.com "Title")

Link to other content:

See [Getting Started](?content=getting-started) for more info.

Link to actions:

[View Orders](?action=MY-ORDERS)

Images

![Alt text](image-url.jpg)
![Alt text](image-url.jpg "Title")

Lists

Unordered Lists

- Item 1
- Item 2
  - Nested item
  - Another nested
- Item 3

Ordered Lists

1. First item
2. Second item
3. Third item

Blockquotes

> This is a blockquote.
> It can span multiple lines.
>
> And include paragraphs.

Code Blocks

Code block Multiple lines

With syntax highlighting hint:

function hello() { console.log("Hello, World!"); }

Horizontal Rules

---

or

***

Tables

| Column 1 | Column 2 | Column 3 |
|----------|----------|----------|
| Data 1   | Data 2   | Data 3   |
| Data 4   | Data 5   | Data 6   |

Alignment

| Left | Center | Right |
|:-----|:------:|------:|
| L    | C      | R     |

Advanced Formatting

Line Breaks

For a line break within a paragraph:

  • End line with two spaces
  • Or use <br>
Line one  
Line two (note two spaces at end of line one)

Nested Lists

1. First item
   - Sub-item A
   - Sub-item B
2. Second item
   1. Sub-item 1
   2. Sub-item 2

Task Lists

- [x] Completed task
- [ ] Incomplete task
- [ ] Another task

HTML in Markdown

When to Use HTML

For elements Markdown doesn't support:

This is markdown with <span style="color: red;">HTML inline</span>.

<div class="custom-block">
    <p>Full HTML block</p>
</div>

Common HTML Additions

<center>Centered text</center>

<details>
<summary>Click to expand</summary>
Hidden content here.
</details>

Styling Markdown Output

Default Styles

Markdown converts to standard HTML elements that inherit your site's CSS.

Custom Styling

Add CSS for Markdown content:

/* Target Markdown output */
.markdown-content h1 {
    border-bottom: 1px solid #ccc;
    padding-bottom: 0.5em;
}

.markdown-content pre {
    background: #f4f4f4;
    padding: 1em;
    overflow: auto;
}

.markdown-content blockquote {
    border-left: 4px solid #ddd;
    margin-left: 0;
    padding-left: 1em;
    color: #666;
}

.markdown-content table {
    border-collapse: collapse;
    width: 100%;
}

.markdown-content th,
.markdown-content td {
    border: 1px solid #ddd;
    padding: 8px;
}

Wrapper Pattern

In your template:

<div class="markdown-content">
    <?content(my-article)?>
</div>

Example Documents

Help Article

# How to Place an Order

Follow these steps to place an order through our portal.

## Step 1: Browse Products

Navigate to the [Products](?action=PRODUCTS) page and browse our catalog.

## Step 2: Add to Cart

Click the **Add to Cart** button on any product you wish to purchase.

## Step 3: Checkout

1. Click the cart icon
2. Review your items
3. Click **Checkout**
4. Fill in shipping details
5. Confirm your order

## Need Help?

Contact our [support team](?content=contact-support) if you have any questions.

FAQ

# Frequently Asked Questions

## Orders

### How do I track my order?

Go to [My Orders](?action=ORDERS) and click on the order number to see tracking information.

### Can I cancel an order?

Orders can be cancelled within 24 hours of placement. Contact support for assistance.

## Account

### How do I reset my password?

Click [Forgot Password](?action=FORGOT-PASSWORD) on the login page and follow the instructions.

Best Practices

Keep It Simple

  • Use simple Markdown where possible
  • Reserve HTML for special cases
  • Maintain readability

Consistency

  • Use consistent heading levels
  • Follow a style guide
  • Keep formatting uniform

Accessibility

  • Use proper heading hierarchy
  • Provide alt text for images
  • Use descriptive link text

Troubleshooting

Formatting Not Working

  • Check for proper spacing
  • Ensure blank lines between elements
  • Verify syntax is correct

Tables Misaligned

  • Ensure consistent pipe separators
  • Check for proper header row
  • Verify separator row (---)
  • Check URL format
  • Verify content/action exists
  • Test the link independently