Browse Source

Added Tab markdown extension, bumped version (0.8), updated readme

Implements #1 (tabs)
Solves #3 (requirements)
tags/0.8.0
Frans Bouma 10 years ago
parent
commit
6df738fd66
5 changed files with 634 additions and 346 deletions
  1. +528
    -336
      Themes/Default/Destination/css/theme.css
  2. +26
    -0
      Themes/Default/Destination/css/theme_colors.css
  3. +26
    -0
      readme.md
  4. +1
    -1
      src/Constants.cs
  5. +53
    -9
      src/MarkdownSharp.cs

+ 528
- 336
Themes/Default/Destination/css/theme.css
File diff suppressed because it is too large
View File


+ 26
- 0
Themes/Default/Destination/css/theme_colors.css View File

@@ -257,6 +257,32 @@ mark {

/* #endregion*/

/* #region Tabs*/
/*
Tab CSS by Joseph Fusco. http://codepen.io/fusco/pen/Wvzjrm, slightly adjusted to remove the round corners.
Shadow colors are defined in theme.css, as they can only be defined with the shadow definition directly.
*/

.tab-wrap {
background-color: #fff;
}

.tab:checked + label {
background-color: #fff;
}

.tab + label {
color: #222;
background-color: #f2f2f2;
}

.tab + label:hover {
background-color: #f9f9f9;
}
/* #endregion*/



/* #region media queries*/
@media screen and (max-width: 768px) {
.body-for-nav {


+ 26
- 0
readme.md View File

@@ -101,6 +101,29 @@ Example:
This will display the font-awesome icon for anchor: @fa-anchor
```

### Tabs
It's very easy with `Docnet` to add a tab control with one or more tabs to the HTML with a simple set of markdown statements. The tab statements are converted into pure CSS3/HTML tabs, based on the work of Joseph Fusco (http://codepen.io/fusco/pen/Wvzjrm)

To start a Tab control, start with `@tabs` and end the tabs definition with `@endtabs`. Between those two statements, which each need to be suffixed with a newline, you define one or more tabs using `@tab` followed by the label text for that tab, followed by a newline. End your tab contents with `@end`.

The following example shows two tabs, one with label 'C#' and one with 'VB.NET':
@tabs
@tab C#
Content 1 2 3
```cs
var text = DoTabsBlocks("text");
```
@end
@tab VB.NET1
Content 1 2 3
```vb
Dim text = DoTabsBlocks("text")
```
Additional text
@end
@endtabs

##Search
`Docnet` will generate a search_data.json file in the root of the destination folder which is used with the javascript based search. It's a simple text search which can locate pages based on the word/sentence specified and will list them in first come first served order. For general purposes of locating a general piece of documentation regarding a topic it's good enough.

@@ -109,6 +132,9 @@ This will display the font-awesome icon for anchor: @fa-anchor
##Linking
`Docnet` doesn't transform links. This means that any link to any document in your documentation has to use the url it will get in the destination folder. Example: you want to link to the file `How to\AddEntity.md` from a page. In the result site this should be the link `How%20to/AddEntity.htm`, which you should specify in your markdown. In the future it might be `docnet` will be updated with link transformation, at the moment it doesn't convert any links besides the usual markdown ones. The markdown parser also doesn't allow spaces to be present in the urls. If you need a space in the url, escape it with `%20`.

##Requirements
`Docnet` is a .NET full application (using .NET 4.6.1) and requires .NET full to run. Not tested on Mono but it's highly likely it works on Mono without a problem. The code uses .NET 4.6.1 but it can be compiled against lower versions of .NET full, it doesn't use .NET 4.6 specific features but as Microsoft supports only the latest .NET 4.x versions, it was a logical choice to use .NET 4.6.1.

##Acknowledgements
This application wouldn't be possible without the work of others. The (likely incomplete) list below contains the work `Docnet` is based on / builds upon.



+ 1
- 1
src/Constants.cs View File

@@ -30,6 +30,6 @@ namespace Docnet
{
public class Constants
{
public const string Version = "0.7.2";
public const string Version = "0.8.0";
}
}

+ 53
- 9
src/MarkdownSharp.cs View File

@@ -21,6 +21,10 @@
* History: Milan ported the Markdown processor to C#. He granted license to me so I can open source it
* and let the community contribute to and improve MarkdownSharp.
*
* [FB] I added for DocNet: (2016) https://github.com/FransBouma/DocNet
* - @alert...@end, to specify alert boxes using markdown
* - @fa-name, to specify font awesome directives
* - @tabs-@endtabs, to specify CSS3 / HTML tabs in the output using markdown.
*/

#region Copyright and license
@@ -312,6 +316,8 @@ namespace Docnet
private int _listLevel;
private static string AutoLinkPreventionMarker = "\x1AP"; // temporarily replaces "://" where auto-linking shouldn't happen;

private int _tabIdCounter=0; // counter used to create unique tab ids on a page.

/// <summary>
/// In the static constuctor we'll initialize what stays the same across all transforms.
/// </summary>
@@ -381,23 +387,24 @@ namespace Docnet
/// </summary>
private string RunBlockGamut(string text, bool unhash = true)
{
text = DoHeaders(text);
text = DoHeaders(text);
text = DoHorizontalRules(text);
text = DoLists(text);
text = DoAlertBlocks(text);
text = DoAlertBlocks(text);
text = DoGithubCodeBlocks(text);
text = DoCodeBlocks(text);
text = DoBlockQuotes(text);
text = DoTabsBlocks(text);

// We already ran HashHTMLBlocks() before, in Markdown(), but that
// was to escape raw HTML in the original Markdown source. This time,
// we're escaping the markup we've just created, so that we don't wrap
// <p> tags around block-level tags.
text = HashHTMLBlocks(text);
// We already ran HashHTMLBlocks() before, in Markdown(), but that
// was to escape raw HTML in the original Markdown source. This time,
// we're escaping the markup we've just created, so that we don't wrap
// <p> tags around block-level tags.
text = HashHTMLBlocks(text);

text = FormParagraphs(text, unhash: unhash);

return text;
return text;
}


@@ -1378,6 +1385,43 @@ namespace Docnet
return string.Concat("<i class=\"fa fa-", iconName, "\"></i>");
}

private static Regex _tabsBlock = new Regex(@"(@tabs)\s*([\s\S]+?)\s(@endtabs)", RegexOptions.Compiled);
private static Regex _tabBlock = new Regex(@"(@tab) (\S+)\s*([\s\S]+?)\s(@end)", RegexOptions.Compiled);
private string DoTabsBlocks(string text)
{
_tabIdCounter = 0;
return _tabsBlock.Replace(text, new MatchEvaluator(TabsEvaluator));
}

private string TabsEvaluator(Match match)
{
_tabIdCounter++;

string text = match.Groups[2].Value;
// 'text' is the markdown which contains the different tab definitions. We simply use another regex to collect the tab content - tab header pairs
// which we'll then use here to build the tab HTML. We'll use some global vars to make sure the tabs are unique on the page so the user can specify multiple tabs
// on them.
var tabsMatches = _tabBlock.Matches(text);
var headerSB = new StringBuilder();
var contentSB = new StringBuilder();
int tabCounter = 0;
var checkedAttribute = " checked";
foreach(Match m in tabsMatches)
{
// header
headerSB.AppendFormat("<input type=\"radio\" id=\"tab{0}_{1}\" name=\"tabGroup{1}\" class=\"tab\"{2}><label for=\"tab{0}_{1}\">{3}</label>",
tabCounter, _tabIdCounter, checkedAttribute, m.Groups[2].Value);
// content
var contentText = m.Groups.Count < 2 ? string.Empty : _newlinesLeadingTrailing.Replace(m.Groups[3].Value, "");
contentSB.AppendFormat("<div class=\"tab-content\">{0}</div>", contentText);

// done
checkedAttribute = string.Empty;
tabCounter++;
}
return string.Concat("<div class=\"tab-wrap\">", headerSB.ToString(), contentSB.ToString(), "</div>");
}


private static Regex _alertBlock = new Regex(@"(@alert) (\S+)\s*([\s\S]+?)\s(@end)", RegexOptions.Compiled);

@@ -1409,7 +1453,7 @@ namespace Docnet
break;
}

//removed Outdent on the codeblock
//removed Outdent on the alert block
text = _newlinesLeadingTrailing.Replace(text, "");
return string.Concat("\n\n<div class=\"alert alert-", alertType, "\"><span class=\"alert-title\"><i class=\"fa fa-", faIconName, "\"></i> ", title, "</span>",
text, "</div>");


Loading…
Cancel
Save