File:  [mozdev] / markdowneditor / www / using.html
Revision 1.15: download - view: text, annotated - select for diffs - revision graph
Tue Oct 2 18:47:58 2012 UTC (7 years, 1 month ago) by ondrejd
Branches: MAIN
CVS tags: HEAD
Updated index page.

<!DOCTYPE html>
<html lang="en-US">
	<head>
		<meta charset="utf-8"/>
		<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
		<title dir="ltr">MarkDown Editor: Using</title>
		<meta name="viewport" content="width=device-width">
		<link rel="stylesheet" media="screen" href="style.css">
		<link rel="shortcut icon" type="image/x-icon" href="favicon.ico"/>
		<!-- Required by fancybox -->
		<script type="text/javascript" src="js/fancybox/lib/jquery-1.8.0.min.js"></script>
		<script type="text/javascript" src="js/fancybox/lib/jquery.mousewheel-3.0.6.pack.js"></script>
		<link rel="stylesheet" href="js/fancybox/source/jquery.fancybox.css?v=2.1.0" type="text/css" media="screen"/>
		<script type="text/javascript" src="js/fancybox/source/jquery.fancybox.pack.js?v=2.1.0"></script>
		<link rel="stylesheet" href="js/fancybox/source/helpers/jquery.fancybox-buttons.css?v=1.0.3" type="text/css" media="screen"/>
		<script type="text/javascript" src="js/fancybox/source/helpers/jquery.fancybox-buttons.js?v=1.0.3"></script>
		<script type="text/javascript" src="js/fancybox/source/helpers/jquery.fancybox-media.js?v=1.0.3"></script>
		<link rel="stylesheet" href="js/fancybox/source/helpers/jquery.fancybox-thumbs.css?v=1.0.6" type="text/css" media="screen"/>
		<script type="text/javascript" src="js/fancybox/source/helpers/jquery.fancybox-thumbs.js?v=1.0.6"></script>
		<script type="text/javascript">
$(document).ready(function(){$(".fancybox").fancybox();});
		</script>
		<!-- // Required by fancybox -->
		<!-- Google Analytics -->
        <script type="text/javascript">
var _gaq = _gaq || [];
_gaq.push(['_setAccount', 'UA-2295066-24']);
_gaq.push(['_trackPageview']);
(function() {
    var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
    ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
    var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
})();
        </script>
		<!-- // Google Analytics -->
	</head>
	<body id="body">
		<header>
			<hgroup class="markdowneditorIcon">
				<h1>MarkDown Editor</h1>
				<h2><a href="http://en.wikipedia.org/wiki/Markdown">MarkDown</a> editor anywhere.</h2>
			</hgroup>
			<nav>
				<ul>
					<li><a href="index.html">Home</a></li>
					<li><a href="using.html" class="current">Using</a></li>
					<li><a href="support.html">Support</a></li>
				</ul>
			</nav>
			<!-- Google Adense -->
            <script type="text/javascript"><!--
google_ad_client = "ca-pub-1645587386582967";
/* Large banner */
google_ad_slot = "2968062376";
google_ad_width = 728;
google_ad_height = 90;
//-->
            </script>
            <script type="text/javascript" src="http://pagead2.googlesyndication.com/pagead/show_ads.js"></script>
			<!-- // Google Adense -->
		</header>
		<section>
			<header>
				<hgroup>
					<h3>Using</h3>
				</hgroup>
			</header>
			<article class="mainFeatures">
				<h4>Contents</h4>
				<ul>
					<li><a href="#introduction">Introduction</a></li>
					<li><a href="#working_with_files">Working with files</a></li>
					<li><a href="#mime_handler">MIME handler</a></li>
					<li><a href="#for_developers">For developers</a></li>
					<li><a href="#markdowneditor_notes">Notes</a></li>
				</ul>
			</article>
			<article id="introduction">
				<h4>Introduction</h4>
				<p>
					Firstly you need to add <strong>MarkDown Editor</strong> 
					to the <a href="http://www.mozilla.org/firefox/">Mozilla Firefox</a>'s 
					toolbar &ndash; you can do this by following steps described bellow: 
				</p>
				<ul>
					<li>
						click (using right mouse button) on 
						<a href="http://www.mozilla.org/firefox/">Mozilla Firefox</a>'s 
						toolbar and select <code>Customize…</code> menuitem,
					</li>
					<li>
						find <strong>MarkDown Editor</strong> icon and move it 
						to the toolbar to position where you want it.
					</li>
				</ul>
				<p class="tight"><a href="#body">Back to top</a></p>
			</article>
			<article id="working_with_files">
				<h4>Working with files</h4>
				<p class="todo" style="padding: 5px 0px 5px 10px; width: 90%;">Sorry but this section is not written yet.</p>
				<p class="tight"><a href="#body">Back to top</a></p>
			</article>
			<article id="mime_handler">
				<h4>MIME handler</h4>
				<p>
					<strong>MarkDown Editor</strong> contains 
					<abbr title="Multipurpose Internet Mail Extensions">MIME</abbr> 
					handler for <code>text/x-web-markdown</code> documents so 
					you can view <a href="http://en.wikipedia.org/wiki/Markdown">MarkDown</a> 
					documents directly from <a href="http://www.mozilla.org/firefox/">Mozilla 
					Firefox</a> as a <abbr title="HyperText Markup Language">HTML</abbr> 
					documents.
				</p>
				<p>
					You can test this feature using test files which are 
					included in <strong>MarkDown Editor</strong> sources &ndash; 
					for more details see 
					<a href="https://bitbucket.org/ondrejd/markdown-editor/src/4cbccf88155b/tests/README.md">README.md</a>.
				</p>
				<p>
					<a class="fancybox" rel="mimescreens" href="images/using/screen-mime-01.png" title="Loaded MarkDown document."><img src="images/using/screen-mime-01s.png" alt="Loaded MarkDown document."/></a>&nbsp;
					<a class="fancybox" rel="mimescreens" href="images/using/screen-mime-02.png" title="Source of the loaded MarkDown document."><img src="images/using/screen-mime-02s.png" alt="Source of the loaded MarkDown document."/></a>&nbsp;
					<a class="fancybox" rel="mimescreens" href="images/using/screen-mime-03.png" title="Preference for MIME handler behavior."><img src="images/using/screen-mime-03s.png" alt="Preference for MIME handler behavior."/></a>
				</p>
				<p>
					By default when <a href="http://en.wikipedia.org/wiki/Markdown">MarkDown</a> 
					document is processed by <abbr title="Multipurpose Internet Mail Extensions">MIME</abbr> 
					handler is only <abbr title="HyperText Markup Language">HTML</abbr> version shown but 
					if you check proper preference than document will be loaded also directly into 
					the editor (in a new tab). 
				</p>
				<p class="tight"><a href="#body">Back to top</a></p>
			</article>
			<article id="for_developers">
				<h4>For developers</h4>
				<p>
					There are two main parts that can be reused by other developers &ndash; 
					<a href="https://developer.mozilla.org/en-US/docs/JavaScript_code_modules">JavaScript 
					module</a> with convertor and <a href="https://developer.mozilla.org/en-US/docs/XUL_Tutorial/Introduction_to_XBL"><abbr title="XML Binding Language">XBL</abbr> 
					component</a> that implements editor. For more details about using both of them 
					see <a href="https://bitbucket.org/ondrejd/markdown-editor/src/">source codes</a> 
					of <strong>MarkDown Editor</strong>. 
				</p>
				<h5>Convertor</h5>
				<p>
					Convertor is used for converting <a href="http://en.wikipedia.org/wiki/Markdown">MarkDown</a> 
					documents to <abbr title="HyperText Markup Language">HTML</abbr> documents.
				</p>
				<pre><span style="color: green;">// Load module with convertor</span>
Components.utils.import(<span style="color: blue;">"resource://markdowneditor/MarkDownConverter.jsm"</span>);

<span style="color: green;">// Variable `text` contains MarkDown document</span>
<strong style="color: #95007F;">var</strong> text = <span style="color: blue;">"Some text\n"</span> + 
           <span style="color: blue;">"=========\n"</span> + 
           <span style="color: blue;">"\n"</span> + 
           <span style="color: blue;">"Some text..."</span>;

<span style="color: green;">// Initialize converter</span>
<strong style="color: #95007F;">var</strong> showdown = <strong style="color: #95007F;">new</strong> Showdown.converter();

<span style="color: green;">// Convert MarkDown to HTML</span>
<strong style="color: #95007F;">var</strong> html = showdown.makeHtml(text);</pre>
				<h5>Editor</h5>
				<p>
					Editor is implemented as <a href="https://developer.mozilla.org/en-US/docs/XUL_Tutorial/Introduction_to_XBL"><abbr title="XML Binding Language">XBL</abbr> 
					component</a> so using is pretty simple:
				</p>
				<pre><span style="color: #3F7F7F;">&lt;?xml</span> <span style="color: #95007F;">version=</span><span style="color: blue;">"1.0"</span> <span style="color: #95007F;">encoding=</span><span style="color: blue;">"UTF-8"</span><span style="color: #3F7F7F;">?&gt;</span>
<span style="color: #3F7F7F;">&lt;?xml-stylesheet</span> <span style="color: #95007F;">href=</span><span style="color: blue;">"chrome://global/skin/"</span> <span style="color: #95007F;">type=</span><span style="color: blue;">"text/css"</span><span style="color: #3F7F7F;">?&gt;</span>
<span style="color: #3F7F7F;">&lt;?xml-stylesheet</span> <span style="color: #95007F;">href=</span><span style="color: blue;">"chrome://markdowneditor/content/bindings.css"</span> 
                 <span style="color: #95007F;">type=</span><span style="color: blue;">"text/css"</span><span style="color: #3F7F7F;">?&gt;</span>

<span style="color: green;">&lt;-- Window with test document --&gt;</span>
<span style="color: #3F7F7F;">&lt;window</span> <span style="color: #95007F;">xmlns=</span><span style="color: blue;">"http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"</span> 
        <span style="color: #95007F;">xmlns:html=</span><span style="color: blue;">"http://www.w3.org/1999/xhtml"</span> 
        <span style="color: #95007F;">title=</span><span style="color: blue;">"Test editor"</span><span style="color: #3F7F7F;">&gt;</span>
	
	<span style="color: green;">&lt;-- Editor self --&gt;</span>
	<span style="color: #3F7F7F;">&lt;markdowneditor</span> <span style="color: #95007F;">id=</span><span style="color: blue;">"testeditor"</span> <span style="color: #95007F;">flex=</span><span style="color: blue;">"1"</span><span style="color: #3F7F7F;">/&gt;</span>
	
<span style="color: #3F7F7F;">&lt;/window&gt;</span></pre>
				<p class="tight"><a href="#body">Back to top</a></p>
			</article>
			<article id="markdowneditor_notes">
				<h4>Notes</h4>
				<p class="todo" style="padding: 5px 0px 5px 10px; width: 90%;">Sorry but this section is not written yet.</p>
				<p class="tight"><a href="#body">Back to top</a></p>
			</article>
		</section>
		<aside>
			<section>
				<header>
					<hgroup>
						<h3>Downloads</h3>
					</hgroup>
				</header>
				<article>
					<p>
						Downloads are available on <a href="https://addons.mozilla.org/firefox/addon/markdown-editor/">addons.mozilla.org</a>.
					</p>
				</article>
			</section>
			<section>
				<header>
					<hgroup>
						<h3>Links</h3>
					</hgroup>
				</header>
				<article>
					<ul>
						<li><a href="https://bitbucket.org/ondrejd/markdown-editor/issues">Issue tracker</a></li>
						<li><a href="https://bitbucket.org/ondrejd/markdown-editor/src">Source codes</a></li>
					</ul>
				</article>
			</section>
			<section>
				<header>
					<hgroup>
						<h3>Other projects</h3>
					</hgroup>
				</header>
				<article>
					<p>Links to other projects I'm working on:</p>
					<ul class="projectList">
						<li><a href="http://csvviewer.mozdev.org/" class="icon csvviewerIcon">CSVViewer</a></li>
						<!-- SELF <li><a href="http://markdowneditor.mozdev.org/" class="icon markdowneditorIcon">MarkDown Editor</a></li> -->
						<!-- <li><a href="http://code.google.com/p/qwin/" class="icon qwinIcon">Qwin</a></li> -->
						<li><a href="http://scratchpadsnippets.mozdev.org/" class="icon scratchpadsnippetsIcon">Scratchpad Snippets</a></li>
						<li><a href="http://tbnotes.mozdev.org/" class="icon tbnotesIcon">tbNotes</a></li>
						<li><a href="http://tbtimer.mozdev.org/" class="icon tbtimerIcon">tbTimer</a></li>
						<!-- TODO <li><a href="http://tagssidebar.mozdev.org/" class="icon tagssidebarIcon">TagsSidebar Add-on</a></li> -->
						<!-- TODO <li><a href="http://xabyl2.mozdev.org/" class="icon xabyl2Icon">Xabyl2</a></li> -->
						<li><a href="http://xpcomviewer.mozdev.org/" class="icon xpcomviewerIcon">XPCOMViewer</a></li>
						<!-- TODO <li><a href="../xuledit.mozdev.org/" class="icon xuleditIcon">XULEdit</a></li> -->
						<li><a href="http://xulsqliteconsole.mozdev.org/" class="icon xulsqliteconsoleIcon">XUL SQLite Console</a></li>
					</ul>
				</article>
			</section>
		</aside>
		<footer>
			<p>
				&copy; Copyright 2012 <a href="mailto:ondrejd@gmail.com">Ondřej Doněk</a>. Theme is derived from theme used on <a href="http://www.codeplex.com/">codeplex.com</a>.
			</p>
		</footer>
	</body>
</html>

FreeBSD-CVSweb <freebsd-cvsweb@FreeBSD.org>