About Textile and Live Comment Previews
When working with text, you’ll want to keep it looking the very best. To help “educate” my text, I’m using the Textile for Wordpress plugin. Basically Textile converts normal quotes to curly quotes (“ … ”), but it also allows you to use a very special shorthand syntax for writing text.
Now, for a while, I’ve offered a live comment preview for comments on this site. It would show a real-time representation of the comment you were typing, including applied HTML tags you used. But it wasn’t compatible with the Textile syntax.
A while ago, I noticed that Jon Hicks had a live preview in place, that would accept Textile syntax. More recently, Michael’s redesign included an an equally impressive textile enabled live-preview. So I figured that now was the time for me to upgrade and stay with the program.
I contacted Jon by email, asking permission to blatantly steal his live preview code. He kindly wrote back that it was in fact, not his code, but something he had gotten elsewhere. As it turns out, a clever bloke called Jeff, has written not one but two snippets of Live Preview code you can apply to your comments.
But before you go and apply one version to your own site, you should consider which of these two snippets you should use. Each system has it’s own share of pro’s and cons.
The Options
The long of the short is that the normal Textile Live Preview is very fast, with an instant preview. However, it does not allow you to set the mime type of the page to “application/xhtml+xml”, which to my understanding would be the correct thing to do for XTHML strict. On another downside, it’s 100+ lines of code, so it’ll take a small while extra to load.The other option, dubbed The (Real) Live Textile Preview, is only 30 lines of code, works fine with “application/xhtml+xml”, and supports even more Textile code. On the downside, this preview is not instant at all, in fact there’s a small delay before the preview is shown. Because every time the preview is updated, the server is contacted using XMLHttpRequest. While I honestly can’t say anything educated about this, I have a bad feeling that it might cause unnecessary stress to your server.
So, make a choice, and get yourself a live preview! For now, you can test out mine right below. In added features, you’ll also get a live preview of what happens when you subscribe to comments. Go on, try that out as well.
About Textile
For a long time, I’ve used Textile 1, the one that ships with the default Wordpress installation, but just recently, I upgraded to Textile 2 (Improved) 2.05 that requires another plugin, “SmartyPants PHP” to work. This, Textile 2, has more options and better syntax, but has one glaring omission. Textile 1 would transform two dashes (–) into an Em-Dash (—). Lovely. Why was that feature removed?So what Textile plugin are you using? Textile 1, Textile 2, or Textile 2 (Improved)? Or maybe Markdown?
Feel free to share your experiences and recommendations.
Live Preview Scripts Download
- Normal Textile Live Preview
Faster preview, fewer options - (Real) Textile Live Preview
Slower preview, more options
I’m using Textile 2 Improved, though to be honest I haven’t actually spent any time figuring out what the differences between the versions are, figuring higher must be better :)
Besides, I rarely do anything but italic or bold.
Anyhoo, am I right in assuming that you went with the first option? It seems nice and fast. I’m using the second option, though I didn’t get mine from Jeff… I don’t really mind the extra load time, and I’m wondering if the server round-trip isn’t best avoided.
Actually I haven’t been using Textile 2 Improved, until just now after having switched host! You won’t believe it, but my old host had, yes, too little memory for anything but Textile 1.
The main difference between Textile 2 and Textile 1 is a couple of bugfixes, and as mentioned that em-dash (which I think looks great). But not many use itl… but it does look great.
As for live preview, yes, I went with the first option. As for the server round-trip, I’m not really sure how much it hammers your server, I have no experience to base it on… it’s just that nagging feeling that “it can’t be right”. Then again, it can :)
An FYI, Roger at 456 Berea Street has a recent article about quotes and the right way to use them. It’s only slightly related to this, but I thought you might be interested.
Great site, by the way. Found you from your What Makes a Good Website comment on Urbanmainframe.
J.J.,
Great article, it has a few points I didn’t know about, for instance, the
qtag! Amazing I didn’t stumble on to that one yet. Too bad it doesn’t seem to work in IE. The same goes for the:beforeand:aftercontent.Appreciate your comments, thanks! Reminds me I have to follow up to that Urban Mainframe thread…
what is the actual code you have in here to make this work? i must be stupid, because no one seems to post it, and yet many people are using it.
i’d love to know what the tags are to implement this .js
fernando,
I see what you mean, I didn’t make it clear enough from where I got the code.
Since I didn’t make the code myself, I’m linking to it externally, in the paragraph dubbed “Options”.
There’s “The (Real) Live Textile Preview“, which I’m not recommending due to server-woes as yet unknown, and the “Normal Textile Preview“, which I’m using here, and recommending. Both of these links should have pages that adequately explains their usage and installation, but just for show, here’s a sample page of the live textile preview I’m recommending.
>To help ?educate? my text, I?m using the Textile for Wordpress plugin.
I just understood why they call it educating text. Cause it’s supposed to be smart text …har har har.
All the links on the website are broken. There is a referer but no download of the php file or any mention of how the comments.php template should be anywhere.
Do you think you can help?
There, Constantinos, the article is updated!
I’ve been through the links but it still isn’t apparent how to go about installing this. Unless I’ve just missed something(it is early here) Fatal-Ecstacy
Dru,
Basically, it’s not easy. It is not a Wordpress plugin. It is a JavaScript that you have to tame to fit your needs. If you know the JS, it’ll fit for Textpattern, or any other CMS out there that uses Textile.
It is, however, entirely possible that someone made a modified default
comments.phpfile for Kubrick that does what you need, but I haven’t found one.I might revisit this article in the future, if I get the time to simplify things. It should be possible to make it into a WP plugin, but you have to ask Jeff Minard to do that.
Thanks for laying out the differences.