I'm trying to get code highlighting to work for a simple blog built with jekyll. I want to be able to do code highlighting within posts written in markdown so I enabled redcarpet as markup language. This works all fine, the code gets formatted in <pre></pre> tags and all the various elements of the code get corresponding classes. e.g.
<span class="n">function</span>
<span class="n">saySomething</span>
<span class="p">()</span>
<span class="p">{</span>
etc.
This is awesome but this doesn't give us of the actual highlighting (color) yet. So I suppose there must be some css ready to copy and paste which actually does the styling of the different code elements. Or am I missing something completely?
I looked into some code highlighting libraries like prettify or prism but these do their own formatting with javascript in the browser. But since redcarpet already does the heavy lifting work of formatting the code it is not necessary doing it again.
Any hints?
You need some CSS magic. Use this one or pick one from here.
You can create the CSS with the highlighter itself
rougify style > rouge.css
Or
coderay stylesheet > coderay.css
I like to share the solution as I faced and it took much time to get rid of this issue. Default syntax highlighting is very poor in Jekyll. Like David said, You really need some CSS magic. Check this gist to solve the syntax highlighting problem.
Related
I am trying to modify a CSS file using Sublime Text 2, however, all the code is presented in one linebreaks with no line break whatsoever.
What can I do to change that into readable code?
Try using Code Beautifier. You input the code and it formats it for you. There are many other sites like this one so check around and see which one you like best.
If you want to use a Sublime Text plugin, try CSS Format by mutian.
EDIT: As said by Imran Bughio, CSS Beautify is another site like Code Beautifier.
EDIT 2: As noted by Beginner, CSSLisible is another option.
Go to this site CSSLISIBLE. paste your css code and click Clean this code button..
If you go to http://twitter.github.com/bootstrap/customize.html you can customize Twitter-Bootstrap's css & js files to only include what you need.
However, I don't really understand things like "Code and pre" and have no idea if I need it or not. Is there a resource that goes over the properties of each checkbox option so I have a better idea if I should include it or not?
I'm not sure if there is a resource for that, try downloading only the sections that you have concerns about and inspect them.
about CODE and PRE:
<code> vs <pre> vs <samp> for inline and block code snippets
So that check box is for specific styles for these text elements.
have no idea? you can download all component! http://twitter.github.com/bootstrap/assets/bootstrap.zip
Can anyone recommend a module or other Drupal add-on that can be used to format code nicely like I see on a lot of blogs and websites? Ideally something that would integrate with CKeditor, but that's not critical, I can make do with HTML tags if need be. Thanks.
The two most popular Drupal modules seem to be Code Filter and GeSHi Filter for syntax highlighting. For getting GeSHi to work with CKeditor, check out the WYSIWYG - GeSHi bridge module.
Well, there's http://alexgorbatchev.com/SyntaxHighlighter/ which is javascript. It gets applied at view time.
To see your code highlighted in the actual editor, you're probably going to have to work a bit harder. If it were me, I'd start with http://ace.ajax.org/ , which is an editor that grew out of Mozilla's constantly-renamed in-browser IDE project.
Maybe it's to much but check this
http://drupal.org/project/grammar_parser_ui
Quick follow up: as per this post, the WYSIWYG-GeSHi bridge development has been put on hold because of some problems integrating GeSHi buttons into CKeditor's toolbar (they make all the other buttons disappear). I can confirm that this is the case.
However, if I use GeSHi tags in HTML source, they do format things correctly. The really key thing left out of the GeSHi module documentation is that you need to enable it as an input format in Drupal.
Next I'm going to try this method for integrating GeSHi formatting directly into CKeditor without using the WISYWIG module or any bridges. Thanks again for everyone's help.
There's the Prettify module that implements Google Code Prettify as JS library. It works out of the box but it appears to duplicate the pre tags, that is, one pre tag appears as container for the other one:
<pre class="prettyprint prettyprinted">
<pre class="prettyprint">
<code>
.myClass {
<br>
float: left;
<br>
}
</code>
</pre>
</pre>
That's only annoying because you can't really style the pre tag if there's two of them because all your styles are duplicated leading to double margins, padding, borders. etc.
Still, it works out of the box if you can deal with using the default styles provided with the module, and there are a number of them, i.e. Google Code, Stackoverflow etc.enter link description here
I have taken over a code base and I have to read in these html files that were generated by Microsoft Word, I think so it has all kinds of whacky inline formatting.
is there anyway to parse out all of the bad inline formatting and just get the text from this stream. I basically want a purifier programmatically so I can then apply some sensible css
You should use HTML Tidy - it's uniquitous when it comes to cleansing HTML. There's an article on DevX that describes how to do it from .NET.
in the end i just wrote a small class that did a bunch of find and replaces. not pretty but it worked.
I have a legacy application that I needed to implement a configuration page for to change text colors, fonts, etc.
This applications output is also replicated with a PHP web application, where the fonts, colors, etc. are configured in a style sheet.
I've not worked with CSS previously.
Is there a programatic way to modify the CSS and save it without resorting to string parsing or regex?
The application is VB6, but I could write a .net tool that would do the css manipulation if that was the only way.
You don't need to edit the existing one. You could have a new one that overrides the other -- you include this one after the other in your HTML. That's what the "Cascading" means.
It looks like someone's already done a VB.NET CSS parser which is F/OSS, so you could probably adapt it to your needs if you're comfortable with the license.
http://vbcssparser.sourceforge.net/
One hack is to create a PHP script that all output is passed through, which then replaces certain parts of CSS with configurable alternatives. If you use .htaccess you can make all output go through the script.
the best way i can think of solving this problem is creating an application that will get some values ( through the URL query ) and generate the appropriate css output based on a css templates
Check this out, it uses ASP.NET and C#.
In my work with the IE control (shadocvw.dll), it has an interesting ability to let you easily manage the CSS of a page and show the effects of modified CSS on a page in realtime. I've never dealt with the details of such implementations myself, but I recommend that as a possible solution worth looking at. Seeing as pretty much everyone is on IE 6 or later nowadays, you can skip the explanations about handling those who only have IE 5,4,3 or 2 installed.
Maybe the problem's solution, which is most simple for the programmer and a user is to edit css via html form, maybe. I suppose, to create css-file, which would be "default" or "standart" for this application, and just to read it, for example, by perl script, edit in html and to write it down. Here is just the simple example.
In css-file we have string like:
border-color: #008a77;
we have to to read this string, split it up, and send to a file, which will write it down. Get something like this in Perl:
tr/ / /s;
($vari, $value) = split(/:/, _$);
# # While you read file, you can just at the time to put this into html form
echo($vari.":<input type = text name = ".$vari." value = ".$value.">");
And here it is, you've got just simple html-form-data, you just shoul overwrite your css-file with new data like this:
...
print $vari[i].": ".$value.";\n";
...
and voila - you've got programmatical way of changing css. Ofcourse, you have to make it more universal, and more close to your particular problem.
Depending on how technically oriented your CSS editors are going to be, you could do it very simply by loading the whole thing up into a TextEdit field to let them edit it - then write it back to the file.
Parsing and creating an interface for all the possibilities of CSS would be an astronomical pain. :-)