Create Code Editor Style in html - html

I was wondering how to create Code Editor Style in html page like this one.
http://www.tonymarston.net/php-mysql/databaseobjects.html
He has different colors for different variables and strings. He used <pre> and <span> to style but I am not sure if there are faster ways to do this. Any thoughts? Thanks a lot.

I haven't used it myself, but Stackoverflow uses Prettify (according to this question). It seems to have been built with only JavaScript and CSS.

Related

Is it possible to use Emmet in a blank CSS sheet, outside of a selector?

I am currently making my live easier with various custom emmet short forms for code I use a lot. So I tried to make something like the ! in html for CSS so that I can have a * margin reset, comments sectioning my code, media queries etc.
The problem is that for me, emmets validation only allows it to work inside of a selector.. so I would have to type a p{} and the the ! inside that which adds unnecessary work. Do you guys know a way to change the validation?
I went thru all the settings and files I could find, also checked out the documentation.
thx ^^

How would I go about condensing html tags?

I want to condense several html tags into one or just a selection. For example I could turn this:
<html>
<body>
Into This:
<mytag>
I just want a clean neat way of using multiple tags at once. Classes would be fine too in fact div classes or something along the lines of that would be good. Any suggestions?
You can't define custom tags for HTML, but you can omit some closing tags and even a couple of opening ones. See http://code.google.com/speed/articles/optimizing-html.html or directly the specs http://www.w3.org/TR/html4/sgml/dtd.html .
Note that this is allowed only for HTML and not for XHTML.
With html only this will be hard to realize. You could however do something in PHP, using a template engine like Smarty, where you replace {mytag} with <html><body>.
But by using a template engine, you might as well eliminate the problem you seem to have, 'cause to me it isn't completely clear why you would want something like this.

How do I show a snippet of code or a block of code followed by an example of the code?

I am just learning the basics of XHTML and am attempting to use the tag code and pre to display snippets or blocks of code respectively. How do i then show a working example of the code e.g.
<p>Code Sample</p>
<code>
#p1 {font-family: Arial;}
</code>
How do I then display a working example of the code below it?
You won't be able to map that kind of code to actual HTML/CSS using HTML/CSS alone. You could try using JavaScript to achieve this, but your mileage may vary as I haven't done that kind of thing before.
When I wrote HTML/CSS articles with code examples + working samples like you're doing, I used to write style attributes containing the example CSS, or style sample elements by ID, completely manually, but I'm not sure if you're looking for that kind of solution.
StackOverflow uses a simple series of SPAN tags around every single element. The resulting markup is very clean (and even uses the CODE tag), but I'm sure the logic to parse it is not simple.
However, the grammar for these languages is all standardized, so:
1) Someone has probably already written a parser that you can use.
2) If you have/acquire the skill, you can write your own.
Lastly, as BoltClock said, you can style your own markup manually to achieve the desired effect.

WYSIWYG browser editor that generates *good* HTML?

I'm searching for a "suck less" WYSIWYG in-browser X?HTML editor that generates good HTML code.
(no <font>, <foo style="...">, <p></p><span></span><p><span> </span><span><span>blah</span></<span></p> and so on -- <b> and <i> etc is ok).
Should be easy-to-use as it is going to be used by people that do not know what HTML is.
Any suggestions?
Extra points for Copy-and-Paste-from-Word-readiness! :-)
(I found a lot of editors but they all create that <font> and nested <span> crap that breaks site design and bloats a site with one table up to 100kB.)
Download the current version of CKEditor and look at the XHTML output sample. It shows how to use full WYSIWYG but it doesn't generates font or styles. You just need to adjust the configuration to your needs.
What about WYMEditor?
WYMeditor has been created to generate perfectly structured XHTML strict code, to conform to the W3C XHTML specifications and to facilitate further processing by modern applications.
With WYMeditor, the code can't be contaminated by visual informations like font styles and weights, borders, colors, ... The end-user defines content meaning, which will determine its aspect by the use of style sheets. The result is easy and quick maintenance of information.
I've used it a little and while it takes quite a bit of tweaking if you have very specific needs, it does work out of the box for simple XHTML editing. If you set up specially annotated CSS files then it will detect the styles you want users to use and block level elements to which they apply. You can also tell it how to display these styles in the editor (which might be different from how you want them displayed in the resulting XHTML).
Of course, it generates XHTML, not HTML, so it may not meet your exact needs.
Wikipedia has a category for them:
http://en.wikipedia.org/wiki/Category:JavaScript-based_HTML_editors
You can use Markdown with the WMD UI, it's the one used by Stack Overflow. It always produces valid HTML code.
I just recently searched for an editor to create solid documentation, whose output is suitable for Subversion diffs: https://superuser.com/questions/126621/wysiwyg-editor-for-structured-text-suitable-for-svn-versioning
The editor that was suggested - "KompoZer" - turned out to be fantastic, especially because it generates very clean HTML (in my opinion). And I say that, although I had originally preferred something leaner than HTML.
P.S. Reading your question again, I'm not sure, what you mean with a "browser editor" - are you looking for an editor that can be integrated in an HTML page? KompoZer is based on a browser, but it can probably not be integrated in an HTML page.
I recently switched one of my projects to markdown to avoid this exact issue. There's still a bit of a learning curve for the users but I haven't had to deal with the usual issues that occur when they copy/paste content from Word and wonder why it blew up.
Having said that, I prefer CKEditor over TinyMCE and the Telerik controls. I've generally found it generates somewhat cleaner HTML.
There are several WYSIWG editors for embedding within your website out there.
WYMeditor (http://www.wymeditor.org/) looks very nice and seems to be a good fit for targetting clean and valid XHTML results.
Spaw2. Although it's kinda abandoned now.
The Apple Cocoa NSTextView class exports quite nice html, where all the fiddling is done through specifying a style sheet in the header. The Apple TextEdit editor uses this.
http://tinymce.moxiecode.com/ - easy to use, can import form Word, and restrict formatting to predefined CSS styles, to provide consistent output.
This post is 8+ years old now but still relevant...
I found an awesome github page with a curated list of WYSIWYG editors, including a few WYSIWYM ones which guarantee sane html. As of 2018, the most current and best WYSIWYM one looks like ProseMirror, or maybe ORY Editor if you're looking for something to edit entire webpages(!) in one textfield.

HTML and CSS in Qt4 (which) widgets?

Can somebody tell me where in Qt gui can I use HTML?
Which widgets do support HTML?
Or more specific: why HTML doesn't work in QTreeWidgetItem and QTreeListItem?
I'm trying to make some of the text in QTreeWidgetItem italic or different colour and I can't do it with HTML, it is not interpreted at all, I just see HTML code in tree items.
In QLabel HTML works fine...
I did some research and documentation: http://qt.nokia.com/doc/4.5/richtext-html-subset.html says that QTreeWidgetItem should support that too...
OK, after some research I've found a way to see HTML in items-widgets - you have to add custom delegate to it (and handle the HTML in that delegate).
Found it in "Rapid GUI Programming with Python and Qt" book :-)