开发者

Expanding PHP Markdown to Accept CSS Classnames

I'm a huge fan of Markdown (using it in nearly all of my PHP projects) but not a fan of its limited output. Much of the rendering is a bit too simple, and doesn't really allow me much control or freedom regardings its layout. For instance, I can insert an image:

![Alt Text](path/to/image.jpg)
This is my image!

But that will simply be converted into:

<p>
  <img src="path/to/image.jpg" alt="Alt Text" /> This is my image!
</p>

Suppose I wanted to float my image to the right? I cannot currently add any classes to the syntax, but wouldn't that be a nice feature to have? I'd like to be able to output:

<p>
  <img src="path/to/image.jpg" 开发者_如何学JAVAalt="Alt Text" class="alignright caption"> 
  This is my image!
</p>

Support for one or more CSS classes would be phenomenal. My question is regarding the best way of implementing this support into the PHP-version of Markdown.

Ideas?


Markdown has no syntax in the core version to support CSS class names, inline styles, or id attributes. Depending on what you are doing, you may find Textile to be a better solution for you. In someways it is similar to Markdown, and in others it is quite different. For instance, to get the output you mentioned above in your question, you would use this Textile string:

(alignright caption)path/to/image.jpg(Alt Text)! This is my image!

Which would translate to this:

<p>
  <img src="path/to/image.jpg" alt="Alt Text" class="alignright caption"> 
  This is my image!
</p>

You can also apply inline styles (horror of horrors) using {}

You can play with the syntax on their live demo page.

I had a bit of trouble finding a Textile parser for PHP, so your mileage on this answer may not be as much as I hoped. I did find this snippet, but it surely can't be the entire thing.


There is no "best way" to implement this into Markdown; you would simply cease to be using Markdown (you instead have your own creation).

Thankfully, Markdown does not restrict your control or freedom as much as you think.

Markdown is not a replacement for HTML, or even close to it. Its syntax is very small, corresponding only to a very small subset of HTML tags. The idea is not to create a syntax that makes it easier to insert HTML tags. In my opinion, HTML tags are already easy to insert. The idea for Markdown is to make it easy to read, write, and edit prose. HTML is a publishing format; Markdown is a writing format. Thus, Markdown’s formatting syntax only addresses issues that can be conveyed in plain text.

For any markup that is not covered by Markdown’s syntax, you simply use HTML itself. There’s no need to preface it or delimit it to indicate that you’re switching from Markdown to HTML; you just use the tags.

Source: Markdown Syntax Documentation - Inline HTML


Check out the info at this link:

http://www.pingtrip.com/weblog/2008/04/adding-custom-tags-to-markdown

You could use that exact technique to make a span or div 'block' which would have the style applied. It seems to work on multiple lines no problem.

It would be more difficult to include the classname in the tag, but by how much I cannot say right now. I'm going to get around to doing it eventually, I'll post the results here if I do.

I wonder why so many people only say "Markdown isn't for that"? Markdown is much too useful to be limited to blogs and message board comments.

EDIT:

To make it more clear without following the link:

You can create custom tags that allow you to define start and end strings and the replacement text. For example:

-s %classname%
Here is your
customly styled
markdown script
s-

That could pretty easily be implemented to apply a span/div block of a certain class/id. Follow the link to see an example implementation of "Warning" and "Note" boxes.


use markdown with haml, see http://xtargets.com/2010/10/05/why-wouldnt-you-use-haml/


Php Markdown Extra includes the ability to add classes, see https://michelf.ca/projects/php-markdown/extra/#spe-attr. This feature was added March 2015, see https://github.com/michelf/php-markdown

0

上一篇:

下一篇:

精彩评论

暂无评论...
验证码 换一张
取 消

最新问答

问答排行榜