I'm moving my blog to Octopress. I have a small niggle with the interaction between Octopress and MathJax, in that the markdown parsing in Octopress happens first, and it tramples all over the MathJax code.
For an example of what I mean, you can see my raw .md file here and the result after processing here.
I need some way of telling Octopress to ignore a chunk of text, so that it is passed through processing unchanged, and the MathJax script can correctly render it as mathematics.
I've tried surrounding the math with <pre> and <span> tags, and surrounding it with backticks, none of which have helped.
It turns out that if you search hard enough on Google, this is a known and solved problem. One approach is detailed on chico's blog, and involves switching the markdown parser to kramdown.
A simpler solution, which only allows for display math (no inline math) can be found on Gregory Lussier's blog and involves using a , which stops markdown processing.
The solution I've decided to go with is detailed on Luikore's blog and involves a custom markdown processor, which is a fork of rdiscount. It also solves several other niggling problems at the same time.
Related
I am creating a website and would like to add a few StackOverflow-esque markup. For instance,
Code that can
take up multiple lines
elegantly,
Blockquotes easily added,
and et cetera.
Is this just a lot of CSS, (that I will code if I have to) or can I integrate a StackOverflow markdown into my code?
Take a look at adding what's known as a 'markdown' library. There are plenty out there that all follow the same general syntax, I personally use Showdown: http://showdownjs.com/.
Undoubtedly YES
Stack Overflow use markdown and There are many libraries for implementing markdown, for example many developers suggest you to use showdown, I prefer to use remarkable but I suggest at first investigate about them.
I proffer to you read awesome article about markdown libraries and choose the best one for your case.
This might be a yes/no question, because it's still not clear to me what level of Jekyll customization is allowed in Github pages. I've been tinkering a lot with code blocks and syntax highlighting and it seems since sometime in the last 9 months, the options for syntax highlighting in Github pages has been limited to rouge, which I think works pretty well. The documentation on this is brief and I've been getting more details scattered around the web. I was going to go to the trouble of making a custom lexar, following the wiki instructions, but if there's nowhere to slot this into my Github page, maybe it isn't worth the trouble. (Actually making the lexar probably wouldn't take very long... I'd just be simplifying another one).
My question is this: would my hypothetical custom lexar have to be implemented through a Jekyll plugin and thus not allowed on Github pages? Or is there another way? Thanks.
I'm going to learn the language Markdown to quickly and easily write articles for my website under Wordpress.
To do this, I installed under the Sublime Text 2 plugin Markdown Editing. All delivered normally. Then I create a new document in the editor and assign it a syntax Markdown.
But what to do next? How should I save this file? What do I need to compile the file from the markdown in html? I have not found a good description of how to work with this plugin and how to get ready html-file from the file markup markdown.
Tell me, please.
Apps
For learning Markdown I think Sublime Text may be overkill; it's powerful but adds a lot of complexity. It's a great tool but it isn't where I would start.
Instead I would recommend learning Markdown with simpler writing app like Byword or Mou for Mac, MarkPad for Windows or Editorially for the web.
Still want to use Sublime Text? I'd highly recommend checking out Federico Viticci's article on Sublime Text and Markdown, some of it is Mac specific but since Sublime Text is a cross-platform tool most of what he mentions is as well, it will definitely help you get started.
One of the key things to note is that Markdown Editing isn't an all-in-one tool, it's mostly focused on writing and editing Markdown (See my update below). It's still best to pair it with other Markdown related tools for doing things like converting to HTML.
There's also a little more information on Markdown Editing on Brett Terpstra's site (Brett created it). Here's the introduction post, Brett's pretty responsive so if you have any questions try leaving a comment or contacting him directly.
Saving
Regardless of the editor you use you have a lot of options for saving. Markdown is just plain text so you can save the file as .txt or just about whatever you want. The most popular conventions are .txt, .md, and .markdown. I use .md most of the time.
Converting to HTML
Here again you have a ton of choices. Most text editors that have been designed for Markdown will let you copy or export what you've written as HTML. I usually use the fantastic Marked 2 app which is editor agnostic but it's Mac only. In Sublime Text there are plenty of Markdown converters out there, just search Package Control for Markdown.
If you want the most flexibility possible Pandoc does a whole lot more than just HTML. I use the Pandoc Sublime Text extension.
Another alternative would be to use a Markdown plugin in WordPress so you don't even need to convert it to HTML, just copy and paste it into your WordPress post editor. I haven't used WordPress recently enough to recommend one specifically but I know there are some very solid options there.
Finally, Byword has an optional WordPress extension you can buy if that appeals to you.
Learning Markdown
One last note, there are some great resources out there for learning the language itself. The spec is certainly comprehensive but can be a little intimidating. Lifehacker has a decent introduction but the resource I always recommend is the book Markdown by David Sparks & Eddie Smith. It does focus on Mac and iOS tools but the language is the same everywhere, still if Apple tools and screenshots are a problem best to try something else.
I hope that helps!
Update: MarkdownEditing
Looks like my information was a bit out of date regarding the MarkdownEditing package. It does do a little more than just improving markdown writing or editing now and it's development path is now to make it a fully comprehensive Markdown package.
Thanks to Brett for making it a community project and Ali Ayas heading up the project now. Further details on Brett's blog here.
I have a site that wraps some user-generated content, and I want to be able to separate the markup for the layout, and the markup from the user-generated content, so the u-g content can't break the site layout.
The user-generated content is trusted, as it is coming from a known group of users on my network, but nonetheless only a small subset of html tags are allowed (p, ul/ol/li, em, strong, and a couple more). However, the user-generated content is not guaranteed to be well-formed, and we have had some instances of malformed user-generated content breaking the layout of the site.
We are working with our users to keep the content well-formed, but in the meantime I am trying to find a good way to separate the content from the layout. I have been looking into namespaces, but have been unable to find good documentation about CSS support for embedded namespaces.
Anyone have any good ideas?
EDIT
I have seen some really good suggestions here, but I should probably clarify that I have absolutely no control over the input mechanism that the users use. They are entering content into one system, and my page uses that system's API to pull content out of it. That system is using TinyMCE, but like I said, we are still getting some malformed content.
Why not use markdown
If your users are HTML literate or people that can grasp the concept of markdown syntax I suggest you rather go with that. Stackoverflow works great with it. I can't imagine having a usual rich editor on Stackoverflow. Markdown editors are much simpler and faster to use and provide enough formatting capabilities for most situations. If you need some special additional features you can always add those in but for starters oute of the box capabilities will suffice.
Real-time view for self validation
But don't forget to include a real time view of what users are writing. Self validation makes miracles so they correct their own mistakes before posting data.
Instead of parsing the result or forcing the user to use a structured format, just display the content within an iframe:
<iframe id="user_html"></iframe>
<script>
document.getElementById("user_html").src = "data:text/html;charset=utf-8," + escape(content);
</script>
I built custom CMS systems exclusively for several years and always had great luck with a combination of a quality WYSIWYG, strong front-end validation, and relentless back-end validation.
I always gravitate toward CKEditor because it's the only front-end editor that can deal with Microsoft Word output on the front end...that's a must-have in my books. Sure, others have a paste from word solution, but good luck getting users to use it. I've actually had a client overload a db insert thanks to Microsoft Word that didn't get scrubbed in Tiny. HTML tidy is a great solution to clean things up prior to validation on the back end.
CK has built-in templates and classes, so I used those to help my users format without going overboard. On the back-end I checked to ensure they hadn't tried any funny business with CSS, but it was never a concern with that group of users. Give them enough (safe) features and they'll never HAVE to go rogue.
Maybe overkill, but HTML
Tidy
could help if you can use it.
Use a WYSIWYG like
TinyMCE
or CKEditor that has built in cleanup methods.
Robert Koritnik's suggestion to use markdown seems brilliant, especially considering that you only allow a few harmless formatting tags.
I don't think there's anything you can do with CSS to stop layouts from breaking due to open HTML tags, so I would probably forget that idea.
I am looking for a blogging platform that has built in tools for programming-related content. For example, I've seen blogs that have line-numbers, color-coded line separation, code-formatting and tool tips for copying and pasting code-samples. Some of these are better than others. (I'm sure I'm not the only one here who gets annoyed by blog entries with posted source that you can't copy without also copying all the line numbers). So, my question is what blogging-platform does the community recommend for a developer-oriented blog?
er...none that i know of. at the moment, you have to get the bits and pieces together. for my own blog (Blogger, so i'm limited in addons), i use Highlight code converter to generate the display HTML/inline CSS, clean it up a bit (the default settings assume you're creating an entire web page from the code) by removing unnecessary markup, then using it in my blog posts.
Wordpress has the code highligthing feature using some addins, if you are going to host it yourself it will be a very good option to use Wordpress.
BlogDown is a static blogging platform, so it can be hosted on GitHub. You can write posts with markdown files, which has great support for code snippets. You can write your own themes and modules for it also. Unlike Jekkyl, BlogDown does not have a compilations step. You just swap out the markdown files, and you're good to go. It's also worth noting that BlogDown supports custom renderers.