How to Wrap My Markdown in an HTML Div

How can I wrap my markdown in an HTML div?

Markdown

For Markdown, This is by design. From the Inline HTML section of the Markdown reference:

Note that Markdown formatting syntax is not processed within block-level HTML tags. E.g., you can’t use Markdown-style emphasis inside an HTML block.

But it is explicitly allowed for span-level tags:

Unlike block-level HTML tags, Markdown syntax is processed within span-level tags.

So, depending on your use-case, you might get away with using a span instead of a div.

CommonMark

If the library you use implements CommonMark, you are lucky. Example 108 and 109 of the spec show that if you keep an empty line in between the HTML block and the markdown code, the contents will be parsed as Markdown:

<div>

*Emphasized* text.

</div>

should work, while the following shouldn't:

<div>
*Emphasized* text.
</div>

And, again according to the same section in the reference, some implementations recognize an additional markdown=1 attribute on the HTML tag to enable parsing of Markdown inside it.

Though it doesn't seem to work in StackOverflow yet:

Testing **Markdown** inside a red-background div.

Markdown scoping with section and div blocks?

Yep, that's by design. According to Gruber:

Note that Markdown formatting syntax is not processed within block-level HTML tags. E.g., you can’t use Markdown-style *emphasis* inside an HTML block.

I'm not aware of any sort of workaround for that, but I wouldn't put myself at guru-level when it comes to Markdown.

Edit: You might want to check out PHP Markdown Extra if you're working with PHP.

Wrap markdown in appropriate HTML with JavaScript

Sounds like a neat project.

If you're using content-editable, and you want to update the user's input as they're typing, you'll probably need to dive into some fairly gnarly stuff, especially if you want to support IE.

I've actually written two very small libraries Caret and Wysiwyg that could help, take a look at the samples for each.

You can use Caret to watch the user's input, and then use Wysiwyg to do things like wrap the line in an h1 tag. The line wrapping is a little tricky, you can probably look at Caret's source for some hints though.

Even if you don't use either library, they should get you started.

Wrapping plots in another html container within an Rmd file

Here is one way to do it.

1. First, we create a chunk hook to wrap chunk output inside a tag.
2. We pass wrap = div as chunk option to wrap inside div.
3. Set out.extra = "" to fool knitr into outputting html for plot output. Note that this is required only for div tag and not for span, as markdown is parsed inside span tag.s

DONE!

Here is a gist with Rmd, md and html files, and here is the html preview

## knitr Chunk Hook to Wrap

```{r setup, echo = F}
knit_hooks$set(wrap = function(before, options, envir){
  if (before){
    paste0('<', options$wrap, '>')
  } else {
    paste0('</', options$wrap, '>')
  }
})
```

```{r comment = NA, echo = F, wrap = 'div', out.extra=""}
plot(mtcars$mpg, mtcars$wt)
```

Wrap HTML structure around an existing HTML element using jQuery

In the plugin you can replace the textarea with the template and then add the textarea back to the element

(function($) {
  var template = '<div class="uk-htmleditor-content">\  <div class="editor-toolbar">\    // buttons here\  </div>\  <div class="editor-code">\    \  </div>\  <div class="editor-preview">\    <div>Markdown parsed from left panel into HTML preview in this right panel</div>\  </div>\</div>';
  $.fn.markdownEditor = function() {    return this.each(function() {      var $ct = $(template);      $(this).replaceWith($ct);      $ct.find('.editor-code').append(this);    });  };})(jQuery);
$('.markdown-editor-textarea').markdownEditor();

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><textarea class="markdown-editor-textarea"></textarea>

---

Related Topics