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.
Related
tl;dr, what's everybody's favorite CSS obfuscation tool?
I'm trying to figure out ways to optimize our CSS delivery to improve our uncompressed initial download. We recently ran the compiled SASS through a minifier, which cut down the unnecessary whitespace, but I realized we've still got some bloat around the names we've given our classes.
I found a few questions on here asking about CSS obfuscation, but all of the answers have been focused around how that's a bad idea because obfuscation would make your CSS harder to read. I really didn't think those were satisfactory answers, partly because that argument applies equally to Javascript (which people minify all the time), but mostly because I've noticed some cool guys who make pretty popular web applications doing exactly this (ostensibly, to the chagrin of everybody here on StackO).
I would've commented on these answers directly, but I haven't proven to the Overflowbots that I can talk, so I was forced to open a new question.
Anyhow, I know there's a way to do what I want, and I know some really big applications are already following this practice. What are some good tools for minifying CSS class and id names for my site? Something that can plug into the Rails pipeline would be great, but not strictly necessary.
If you are familiar with the popular task-runner Gulp.js, you can use the gulp-selectors plugin to automatically minimize your css selector names.
Read more about it here.
https://www.npmjs.com/package/gulp-selectors
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.
possible duplicate: What tools to automatically inline CSS style to create email HTML code ?
note from author: Oh yeh, definitely duplicate. Sorry.
In general, HTML emails do not support proper CSS techniques.
However, it's nice to develop in these techniques because it makes it a lot quicker to play around with changes etc. (I don't need to sell the benefits of CSS to you all!)
Is there a tool that will take lovely HTML and turn it into nasty email compatible HTML with all the styles extrapolated from the CSS files and placed inline?
Even though 100% compatibility cannot be achieved due to the numerous differences in email clients out there, a tool that helps the process would be very useful, even if it simply takes the CSS and inlines it.
Campaign Monitor have an excellent guide to CSS support in email clients as of 2008. It's very comprehensive.
There are no standards for "email compatible" CSS or HTML, so a tool to perform this task is unlikely to exist. Various client strip out different tags and attribues, especially web-based ones. A lot of it is trial and error. Trial and error is difficult to automate.
I imagine you could run the text of the page through a script that will discover CSS classes and ids and store the styles for them in an array, then go through and replace class="class" with style="style" and id="id" with style="style" etc. It would just be a matter of programming the thing.
Unfortunately, I don't know of any tools, but I would think this could be done using javascript (using jQuery, prototype, or other js framework), to rip through the rendered DOM and discover applied styles and create new HTML based on that
A good start would be to have a source div tag and a target div tag and see that the HTML in the target ends up looking like the source.
Just wrote blog post about converting "good" HTML/CSS into bad, but compatible HTML/inline CSS.
I personally use Premailer for this task, you can read more about it in my post: http://www.versapay.com/developer-blog/the-art-and-science-of-email-rendering-across-email-clients/
Yes, In my experience the best are:
http://premailer.dialect.ca/
http://beaker.mailchimp.com/inline-css
http://zurb.com/ink/inliner.php
I'm about to begin working on a web page with a complex table-based layout (coded years ago).
One of the things I'd like to do is convert the layout to a proper CSS layout with divs and spans.
Can you suggest a good approach for tackling problems like this? Should I use a CSS framework like Blueprint? Just get in there and hack on it until it looks right? I already make heavy use of Firebug and the IE Developer Toolbar.
There generally isn't a silver bullet in converting between table and CSS. Every site is different and has different requirements. The only real answer is: simply start the markup from scratch.
The best advice is to write the markup entirely first. Make sure the markup is accurate, semantic, and represents your data entirely. Do not write the stylesheet... yet. After the markup is done, create the CSS. This way you have semantic markup and CSS is purely controlling the presentation.
CSS frameworks often don't advocate this approach to semantic markup because they force you to add additional tags to comply with their approach. Consequently, CSS frameworks are sometimes more trouble than its worth.
Do the markup, then the CSS.
Before you start, ensure you are using a CSS reset. Eric Meyer and Yahoo YUI are both excellent. This will help to make all your browsers look the same.
Also, install the HTML validator too. This will ensure your HTML is looking good and ready for adding the CSS.
Then grab a copy of Firebug and install it in firefox. This is excellent for seeing which CSS rules are doing what. You can disable individual rules by clicking s cross by each rule.
Now, visit some web pages which validate correctly and see what rules they have used in their style sheets.
Web sites to try are www.alistapart.com, CSS Zen Garden, SimpleBits etc.
The converting process will be a painful headache! I suggest you to start a whole redesign.
I don't know is this can be of any help, I build CSS Framework called Emastic (supports fluid and fixed columns) and you can simulate tables if you want here is the example Emastic Table
I second the commenters who say you should re-design the whole thing from scratch. Clean up the HTML and then make the CSS.
I'd like to add a reason to do so. Usually table-based designs are at least a few years old and therefore look quite passe. Take advantage of this opportunity to improve the design. Either a slight refresh or a complete overhaul depending on your taste and needs.
Iterative way works as well. Start with small blocks, converting them to CSS. This should simplify your table structure, hopefully leaving only the "basic grid" in tables and all the rest in CSS.
From there, pick an existing, tested solution if it's a simple layout (for 1 to 3 columns, there are tons of tested solutions out there). If it's more complex, go with Blueprint.
I wouldn't use a framework. Learning a new framework is only useful if you use it over & over again. Each framework has its own bugs and weaknesses. Use
display: table-cell;
to make a column. These will line up like float: left;. See http://quirksmode.org/css/css2/display.html
In some cases, using regular expressions could speed up your process.
For instance, something like this:
<table.*>\R*.*<tr>\R*.*<td[^>]*?>(.*)</td>
would match the start of a table and provide the contents of the first cell in $1 for a replace:
<div class="container">\n\t<div class="row">\n\t\t<div class="span6">$1</div>
Of course you'd need to customize to match your particular use case. If you have a number of similar pages, you might try hand coding one first and then using something like this to make converting the others simpler.
Another approach would be to use something like this jQuery plugin: https://github.com/ryandoom/jquery-plugin-table-to-div
It is intended to modify following rendering, but could be used during development to take a given table and provide a simple DIV based form of it.
Closed. This question does not meet Stack Overflow guidelines. It is not currently accepting answers.
Questions asking us to recommend or find a tool, library or favorite off-site resource are off-topic for Stack Overflow as they tend to attract opinionated answers and spam. Instead, describe the problem and what has been done so far to solve it.
Closed 8 years ago.
Improve this question
Latex-to-html converters I've seen in the past have been pretty awful. Editing raw html is no fun and doesn't seem to translate well to the printed page. How do others solve this problem? Links to examples (both pdf and html) would be great.
Added: Another similar question was just asked:
What formatting language should I use for project documentation
For documenting code, I also recommend Sphinx. ReStructured Text is nice because it is readable and somewhat marked up in plaintext, and can do a nice job converting to html and to pdf. I still like LaTeX for certain things. My wife and I use LaTeX to write our christmas letter, which we mail out via snail mail. The pdf version is pretty fancy, with two columns, and headers and footers. The html version is simpler. I convert with plastex. Examples here:
http://fedibblety.com/annualReports
I don't think any binary format is a good choice (Word) for any sort of document that you might like to read 10 years from now. That is one of the nice things about LaTeX.
Yes, LaTeX-to-HTML converters used to suck (you've probably tried LaTeX2HTML), but of late they've got better. Tex4ht is highly configurable, and produces nice XHTML+CSS. See also other converters.
You can also use Docbook, if you can bear to write in it. There are converters from DocBook to both HTML and LaTeX (or to PDF directly); an example of the latter is dblatex.
See this post: LaTeX vs Docbook.
After many years of anguish and several false starts, I'm about to revisit this, and I'm going to give Sphinx a try. It can generate HTML or LaTeX from ReStructured Text.
I'm hoping it will be a much "lighter" option than full DocBook, but with many of the advantages.
You could take a step back and use something like DocBook and render to PDF via LaTeX and HTML straight from the DocBook files. Alternatively, Adobe Technical Communication Suite (Framemaker) will let you single-source a document to PDF and HTML. See this posting for a rundown on various technical documentation systems.
This is a personal choice but Latex in theory is perfect however in practice it's pain-in-the-arse. I'm using VS.NET HTML editor + raw HTML edit when I need it.
So I think using an WSIWYG HTML editor is best choice. You can always use a simple tool to convert it to PDF, and you can always edit HTML when you need something advanced. Also it's easier to put online when you need.
That's how I'm managing my software documentations and works fine for me.
PlasTeX looks like a nice latex-to-html converter, though I haven't tried it myself.
My friend Rob Felty wrote a blog post extolling its virtues:
http://blog.robfelty.com/2008/03/19/finally-a-better-latex-to-html-converter/
AsciiDoc looks like an interesting possibility.
Read about EPUB format. Its e-book format. http://en.wikipedia.org/wiki/EPUB
Since the answer mentioning Asciidoc was somewhat short on examples, here are some of the things your are looking for:
A pdf generated with Asciidoc
A cheatsheet with a side by side of the Asciidoc markup and the html result.
A list of publications done using Asciidoc, including O'Reilly books and the git documentation (to see both ends of the user scale).
I'm not sure that latex is really the best tool for this. The trouble you're having with the usual latex to html converter is indicative of the problem: html is simple not as expressive as latex.
If you insist on latex to html, take care to use a limited subset that can convert reasonably.
I've used TeXinfo in the past and it does a good job. Here's an example: http://yootles.com/api. I'd prefer to stick with LaTeX though instead of use another language.
If everything else fails you could grab an LaTeX to XML converter and write a simple XSLT stylesheet to convert it to HTML, or create a CSS style sheet and attach it to the XML file directly.
We've been using WebWorks ePublisher (www.webworks.com) which offers both multiple single-source formats (we are using Word) and the ability to output to many output formats (we output to Adobe PDF and Online Help (.CHM).
We were facing this problem in an academic project that involved Eclipse software, and we used plastex to convert Latex to HTML and Eclipse Help. Getting it to work was quite difficult, but the end result looks really nice. You can see all three versions here:
http://handbook.event-b.org/
Further, as this is an open project, the code (build scripts) are available. We have a continuous build system (Jenkins) that rebuilds everything when new Latex is checked in. This is particularly nice, as contributors don't need to install the toolchain on their systems. They just check in the new Latex and check on the server whether the HTML was produced correctly. Sources:
http://sourceforge.net/p/rodin-b-sharp/svn/HEAD/tree/trunk/Handbook/org.rodinp.handbook.feature/
Best, Michael
I don't have enough points to comment, but to bolster the plastex answer, here is the updated plastex example link:
http://robfelty.com/2008/03/19/finally-a-better-latex-to-html-converter
LaTeX? Seriously? I wasn't aware anyone outside academia still used it. I'd go with HTML, which you can save as PDF from the web browser. If you really must have some advanced typographic stuff, go with Word instead - it has a way to save to HTML (probably not as clean as one would like), and you can save as PDF with a free plug-in (downloadable separately).
Oh, and I wouldn't bother using things like InDesign - they are overkill. Also, don't bother paying for Acrobat Professional - there is a zillion free solutions available.