Markdown for codes on webpage - html

I am experienced with CSS and a beginner in Python. In the past, while writing blogs/webpages with codes, I would simply just create a div with a particular class and make it a code bloc with different colour and font-family, etc.
However, these days I've seen so many beautiful applications of markdown such as github-markdown-css or dillinger. But I really don't know where to start learning. For instance, I am not even sure where to execute the installation instruction below...
$ npm install --global generate-github-markdown-css
If I really want to really go beyond linking html files/blog posts with CSS and do some nice-looking markups, what are the steps necessary?
To make it more solvable as a question in this forum: if I just have a html file and want to create a code bloc showed above by typing
> line 1
> line 2
instead of
<div class="codebloc">
line 1<br/>
line2
</div>
Where should I start?

For instance, I am not even sure where to execute the installation instruction below...
npm install --global generate-github-markdown-css
This command, which you can execute in your terminal, will install the specified npm package generate-github-markdown globally, making it available from anywhere on your system. To execute it you'll need npm installed on your computer. If you're not already familiar with npm, I suggest reading the official documentation or this guide on Sitepoint. Since it installs the package globally, you can execute the command from pretty much anywhere on your computer.
How do I make code blocks in Markdown?
Markdown will automatically convert text with for spaces in front to code, which looks like this:
console.log("This code is cool");
If the Markdown parser supports GitHub Flavoured Markdown, which most parsers do, you can also wrap your code with three back-ticks ```. If you want inline code you can use just a single back-tick ` on both side of the code.
If you want to learn more about how to do various things with Markdown, including some more examples on how to write code blocks, I recommend looking at this page.

Related

How to edit built in command behavior

I want to edit find_under_expand (ctrl+d) to consider hyphenated words, as single words. So when I try to replace all instance of var a, it shouldn't match substrings of "a" in words like a-b, which it currently does.
I'm assuming find_under_expand wraps your current selection in regex boundaries like this: \ba\b
I need it to wrap in something like this: \b(?<!-)a(?!-)\b
Is the find_under_expand command's source available to edit? Or do I have to rewrite the whole thing? I'm not sure where to begin.
Sublime's commands are implemented in one of several ways: as macros, as plugins, and internally as part of the compiled program (probably as C++). The default macros and plugins can be found in the Packages/Default directory in ST2 (where Packages is the directory opened when selecting Preferences -> Browse Packages...), or zipped in the Installed Packages/Default.sublime-package file in ST3, extractable using #skuroda's excellent PackageResourceViewer plugin, available via Package Control. Macros have .sublime-macro extensions, while plugins are written in Python and have .py extensions.
I searched all through the Defaults package in ST3 (things are generally the same as in ST2), and was unable to find a macro or .py file that included the find_under_expand command, or FindUnderExpand, which is the convention when naming command classes in plugins. Therefore, I strongly suspect that this command is internal to Sublime, probably written in C++ and linked into the executable or in a .dll|.dylib|.so library.
So, it doesn't look like there's an existing file that you could easily modify to adjust for your negative lookahead/lookbehind patterns (I assume that's what those are, my regex is a bit rusty...). Instead, you'll have to implement your own plugin from scratch that reads the "word_separators" value in your settings file, which the current implementation of find_under_expand doesn't seem to be doing, judging from your previous question and my own testing. Theoretically, this shouldn't be too terribly difficult - you can just open up a quick panel where the user enters the pattern/regex to be searched for, and you can just iterate through the current view looking for matches and highlighting/selecting them.
Good luck!

How to active math tag on mediawiki?

I downloaded mediawiki in order to use dump of wikipedia.
But I have a problem when some articles have formulas.
i follow instruction to activate Tex in Mediawiki
http://www.mediawiki.org/wiki/Manual:Math
http://www.mediawiki.org/wiki/Texvc
http://www.mediawiki.org/wiki/Manual:Enable_TeX
But the main thing I don't understand is to compile Texvc.I don't know what does it mean.Any help? How to run Texvc?
Texvc is included with the Math extension, which I guess you have already downloaded.
Open a terminal window and move to the folder extensions/Math/math under your MediaWiki installation. On most operating systems you should now be able to type make and hit <enter>. If that doesn't work, try gmake. If you still have no success, please tell us what operating system you are using.
You will also have to run the update.php script for things to start work.

DiveintoHTML5.info is based on?

I was wondering what programming/markup languages does Diveintohtml5.info use. I am planning to create an online book(on some math stuff) similar to that of Mark Pilgrims' but need to know what exactly he used to create them.
Did he use a CMS like wordpress? Or it's just plain old HTML and CSS?
I am a bit new to the world of web development. Be kind.
Thanks in advance
Looking at the book’s source code on GitHub, it seems to be mostly static HTML, CSS, and JavaScript. However, it uses Python, Java, and shell code too, as you can see in the Makefile. (Makefiles are run with make.)
The Makefile contains a lot of shell code doing things like substitution, file copying, and concatenation. It also calls the Python and Java code, which is all in the util folder. The Python and Java programs compress the HTML and CSS, build the table of contents from the headings in each file, and do a few other things.

Tool to remove leading/trailing spaces in HTML files?

I have searched but could not find anything similar to what I need. I am looking for a tool that is capable of removing leading/trailing spaces in my HTML files which also have embedded JavaScript. Basically in the end, I plan to use this tool within my Nant scripts to perform this task on the fly with every deployment.
Is there already a tool that can do this, or maybe the best scripting language?
Basically, I will like what MS Word does for text using "justify (Ctrl+J)", to be done for my HTML files.
Here is the solution I found for this.
Using the html compressor command line tool, I was able to only remove the leading spaces of the html file where as fully minifying them didnt work.
Soultion:
java -jar htmlcompressor.jar --preserve-comments --preserve-multi-spaces --preserve-line-breaks --output D:\html\foo-leading_spaces.htm D:\html\foo.htm
Using this tool to generate my desired results, I am able to apply this to my build scripts to perform this process on the fly.
Thanks everyone for their input and hope this helps others in the similar situation.

Automate Haml & Sass with Sublime Text 2 for Windows

I am a front-end guy using Windows for design and html/js/css coding. My work is separate from the back-end guy using .NET. I am also new to Haml/Sass thing as well as Ruby. And definitely not using Rails. After few search, I decided to pick Sublime Text 2 for Sass/Haml support and get rid of my old Notepad++. My first question is:
1. What is the best practice / efficiency to automatically convert whole folder of Haml (primary) and/or Sass to static documents (html/css)?
I have a separate solution for Sass by setting the "watch". I was searching for Haml automatic conversion solution and found few options:
Library for making static websites with HAML/SASS/CSS framework
2. Should I use StaticMatic?
Google search said it is the best. But there seems no update for 2 years
https://github.com/staticmatic/staticmatic
There is also this site (Is it the same?): http://staticmatic.rubyforge.org/how_to_use.html
If I use StaticMatic, I can setup a build system in Sublime Text to run from the Build Menu (http://docs.sublimetext.info/en/latest/file_processing/build_systems.html)
3. OR should I go with all-in-one solution like this (may cost few bucks)? Is there free one?
http://fireapp.handlino.com/
I don't mind to have Sass -watch running separately and another polling mechanism for Haml. I just want to make sure I have the "latest" out there.
Hope to get some advise for my unique situation. Thanks.
The answer is Middleman
http://middlemanapp.com/
It's the replacement for out-dated StaticMatic
HAML:
For automatic conversion from haml to sass you can use this gist: https://gist.github.com/3898955. If you want to automate even more the workflow process, you can use https://github.com/alexnj/SublimeOnSaveBuild sublime package to run the command on file save.
SASS:
For SASS here is the needed setup. https://gist.github.com/3899112.
For automatic conversion on save, the same rules are applied here too, but it's important to include the .sass and .haml extension in SublimeOnSaveBuild.sublime-settings file.
So your file should look like this:
{
"filename_filter": "\\.(css|js|sass|less|scss|jade|haml)$",
"build_on_save": 1
}
You can extend this list at your own wish.