Standard Textarea, No Label, Form Element Class "markdown"

# Headers Are Starting With 1-6 `#` Hash Characters

## The Number Of Hash Characters

### Defining The Header Level

Text wrapped into `*` asterisks or `_` underscores is emphasized. One of these characters results in `*italic*` *italic* font style, two in `**bold**` **bold** font style. Both styles can be `***combined***` ***combined***.

New paragraphs  
begin with a blank line. You can make line breaks by placing two or more spaces at the end of a line like in this sentence after the words "New paragraphs". With enabled Markdown Extra syntax you do not need the two spaces - each line break is converted into an `<br>` element.

* An unordered list begins with one of the following signs: `* - +`
* Hard wraps are ignored in lists for better readability except you are enabling newlines à la GitHub (Markdown Extra enhancement, see below...)
    * Sublist entries start by adding four spaces
* Ordered lists begin with a number
    1. The number value is not interesting for the rendered result
    1. Can you see the point?

You can write `inline code` by wrapping the text in `` `back ticks` `` ...

... or complete code blocks by adding four spaces in front of your text.

> Blockquotes start with `>`
>> Blockquotes can be nested by adding additional `>`

Horizontal rules beginn with three or more `---` minus signs.

---

Links are wrapped in square brackets. There are two types of links: inline and reference.

Inline example:  
`[example](http://example.com/ "Optional title")`

Reference example:  
`[Markdown basics][1]`

You then put the link target anywhere in your text:  
`[1]: https://daringfireball.net/projects/markdown/basics`

The rendered result: [Markdown basics][1]

Images can be created in the same way like links - the only difference is the exclamation mark at the beginning:  
`![Alt text](/path/to/img.jpg "Optional title")`

Since version 1.1.0 the plugin supports the well known image substitution strings (also in lowercase) and brings a configurable one for a custom image function. Here the possible substitutions and the current paths of this system:

&#35;images&#35;
:   #images#

&#35;image_prefix&#35;
:   #image_prefix#

&#35;app_images&#35;
:   #app_images#

&#35;workspace_images&#35;
:   #workspace_images#

We try now to reference an image from this webserver with the &#35;image_prefix&#35;:

![SQL Workshop Icon][2]

[More on the philosophy of Markdown by John Gruber (markdown syntax description)][3]

[1]: https://daringfireball.net/projects/markdown/basics
[2]: #image_prefix#apex/builder/menu-sqlws-128.png "SQL Workshop Icon"
[3]: https://daringfireball.net/projects/markdown/syntax

2650 of 4000

Plugin Description

# Markdown For APEX

_This plugin uses the Stack Overflow JavaScript Markdown implementation to convert Markdown formatted text into HTML._

- Works with APEX versions 4.2.x and 5.x
- Turns a standard APEX text area into a Markdown editor only by setting the form element class to `markdown`
- Live preview - try it out in the sample editor
- Supports the readonly mode of the textarea - this plugin description is a textarea in read only mode ;-)
- Converts the content of all other DOM elements with the class `markdown` into HTML
- Can be used on dynamic contents like reports
- Support for the following Markdown Extra extensions: tables, fenced code blocks, definition lists, footnotes, special attributes, SmartyPants, newlines and strikethrough à la GitHub
- Support for the well known image substitution strings (also in lowercase) in the live preview: #image_prefix#, #app_images#, #workspace_images# and additionally #images#, which is configurable with a own image function
- Syntax highlighting in code blocks with [highlight.js](https://highlightjs.org/)
- Custom preview container, which allows you to create a full screen side by side editor - for an example see the page "Custom Preview, Markdown Extra"
- Event to hook in own code after preview refresh (`Preview Refreshed [Markdown]`, see also the [changelog for v1.3.0](https://github.com/ogobrecht/markdown-apex-plugin#130-2017-03-31))
- You can configure a pre and post conversion function (see also the [changelog for v1.3.0](https://github.com/ogobrecht/markdown-apex-plugin#130-2017-03-31))
- Prints runtime statistics to the browser console when page is in debug mode

## Whats Next?

This will be the last version for APEX 4.2.x. I started already to find replacements for the editor and also the converter, because I found out that under some circumstances the converter fails to render correct results. As an example if you try to show a code block with XML inside the converter will produce wrong output. The new version will depend on Font Awesome and Require.js and therefore only available for APEX 5.1.0 or higher. And hey, its time now to upgrade to APEX 5.x.

## How To Use

1. Install and configure the plugin
2. On your page create a dynamic action on `page load` with the action `Markdown [Plug-in]`
3. Add the CSS class `markdown` to your text areas and other content which should be converted
4. Optionally create an additional dynamic action per dynamic content (reports and other refreshable region types) on framework event `After Refresh` with selection type `Region`
5. For more information see the [GitHub repository](https://github.com/ogobrecht/markdown-apex-plugin)

## Links

* [GitHub](https://github.com/ogobrecht/markdown-apex-plugin)
* [License: MIT](https://github.com/ogobrecht/markdown-apex-plugin/blob/master/LICENSE.txt)
* [Download latest plug-in & demo app](https://github.com/ogobrecht/markdown-apex-plugin/releases/latest)
* [Issues](https://github.com/ogobrecht/markdown-apex-plugin/issues)

Happy writing!

Ottmar