TiddlyWiki Community Search — A serchable index of community wikis

{{||$:/ObsoleteCommunityTagTemplate}}

{{||$:/ObsoleteCommunityTagTemplate}}

{{||$:/ObsoleteCommunityTagTemplate}}

{{||$:/ObsoleteCommunityTagTemplate}}

{{||$:/ObsoleteCommunityTagTemplate}}

{{||$:/ObsoleteCommunityTagTemplate}}

{{||$:/ObsoleteCommunityTagTemplate}}

{{||$:/ObsoleteCommunityTagTemplate}}

{{||$:/ObsoleteCommunityTagTemplate}}

{{||$:/ObsoleteCommunityTagTemplate}}

{{||$:/ObsoleteCommunityTagTemplate}}

{{||$:/ObsoleteCommunityTagTemplate}}

{{||$:/ObsoleteCommunityTagTemplate}}

{{||$:/ObsoleteCommunityTagTemplate}}

{{||$:/ObsoleteCommunityTagTemplate}}

{{||$:/ObsoleteCommunityTagTemplate}}

{{||$:/ObsoleteCommunityTagTemplate}}

{{||$:/ObsoleteCommunityTagTemplate}}

{{||$:/ObsoleteCommunityTagTemplate}}

{{||$:/ObsoleteCommunityTagTemplate}}

{{||$:/ObsoleteCommunityTagTemplate}}

{{||$:/CommunityExtractedPluginTemplate}}

{{||$:/CommunityExtractedPluginTemplate}}

This plugin adds the ability to edit tiddlers by double clicking on its body.
Just try to edit any tiddler shown here by double clicking on it.

This can be considered a fast solution. It is only to fill the gap until TiddlyWiki adds support 
for it officially.

# Open your wiki in a browser
# Drag this link into your wiki
#> [[$:/plugins/danielo515/2click2edit]]
# Save your wiki

! HelloThere

{{HelloThere}}

{{||$:/CommunityExtractedPluginTemplate}}

!!copy this data into text box 
`@article{yesilada201526,
  title={26 th ACM International Conference on Hypertext and Social Media},
  author={Yesilada, Yeliz and Celik, Ilknur and Farzan, Rosta and Houben, Geert-Jan},
  journal={ACM SIGWEB Newsletter},
  number={Winter},
  pages={1},
  year={2015},
  publisher={ACM}
}
`



 ---

<$edit-text tiddler="$:/temp/var" tag="input" type="text"/>
<$button>

<$action-bibtex source={{$:/temp/var}}/>
convert me!
</$button>

!tt
{{tt}}
<$abc source="tt"/>

!tt1
{{tt1}}
<$abc source="tt1"/>

!tt2
{{tt2}}
<$abc source="tt2"/>

[[click  to see examples|examples]]

<a class="muut" href="https://muut.com/i/inmysocks-tiddlywiki-muut-test">inmysocks-tiddlywiki-muut-test forum</a>

<script src="//cdn.muut.com/1/moot.min.js"></script>

{{||$:/CommunityExtractedPluginTemplate}}

[:optional] {repeated}

\arrow no
\start none
\end double
[:optional] {(him | "her" | :them) +","}

<$railroad text="""
[:optional] {repeated +","}
"""/>

The [[railroad diagram|http://en.wikipedia.org/wiki/Syntax_diagram]] above is created using a plugin that will form part of ~TiddlyWiki5's core starting from version 5.1.8.

; Plugin documentation
: [[Introduction|$:/plugins/tiddlywiki/railroad/readme]]
: [[Notation|$:/plugins/tiddlywiki/railroad/syntax]]
: [[Example|$:/plugins/tiddlywiki/railroad/example]]

This site contains the latest development version of the plugin, with arrows on the repeat arcs and a less heavy style.

The plugin now offers a dedicated content type – `text/vnd.tiddlywiki.railroad`. Raw diagram notation can be stored in a tiddler of that type and transcluded into other tiddlers as required:

:[[Transclusion Examples]]

The notation has been extended to support several pragmas for fine-tuning the diagram's appearance.

[[Global configuration|$:/config/railroad]]

;[[Diagram 1]]
:{{Diagram 1}}

;[[Diagram 2]]
:{{Diagram 2}}

{{||$:/CommunityExtractedPluginTemplate}}

{{||$:/CommunityExtractedPluginTemplate}}

\define showalias(tid, alias)
<$set name="alias" value="""content: '$alias$'""">
<$set name="uri" value=<<makedatauri """$tid$""" "text/plain">> >
<$list variable="urititle" filter="[<uri>removeprefix[data:text/plain,]]">
<style>
body .tc-tiddler-frame a[href="#<<urititle>>"] {
  visibility: hidden;
  position: relative;
}
body .tc-tiddler-frame a[href="#<<urititle>>"]:before {
  visibility: visible;
  <<alias>>;
}
</style>
</$list>
</$set>
</$set>
\end

<$list filter="[<currentTiddler>has[alias]]">
<$macrocall $name="showalias" tid={{!!title}} alias={{!!alias}} />
</$list>

<center>
What if ''you did not know'' about TW?<br>
<br>
Would you be grateful if someone told you about it?<br>
<br>
''Who'' will you tell? ...<br>
<br>
[[today?|http://tiddlywiki.com/prerelease/static/HelpingTiddlyWiki.html]]
<br><br>

{{$:/./img/WordOfMouth.png}}
</center>
<style>
#fishclick {
    visibility: hidden;
}
</style>

The [[Alias ViewTemplate]] lets you show an optional name for a tiddler in the story river.

See for example this current tiddler, seemingly titled "About"... but it's not [[About]]

!!!Use
*You must set titles to [[show as links|$:/core/ui/ControlPanel/Settings/TitleLinks]]
*Create an `alias` field to contain... guess what....

!!!Notes
*The original title is still displayed in e.g the sidebar. (I'll take care of this in a later version unless someone else comes first ;-)
*If you don't like the //titles as links// setting, it should be fairly trivial to rewrite the macro to instead use the tc-tagged method.
*Maybe //Aliases// should be redesigned to use the //caption// field instead?
*@plugin makers; //Aliases// enables less scary looking plugin titles. 
*You might also be interested in Tobias Beer's [[Alias Links|http://tobibeer.github.io/tb5/#Alias%20Links]]
*[[Cred|http://blog.escapecreative.com/how-to-replace-text-with-css/]] for how to "css-replace" content.<br><br>

//Mat von [[TWaddle|http://twaddle.tiddlyspot.com]]//

  <$list filter="[tag[CommunityWikis]]">
    <$view field="wiki-address"/>|<$view field="title"/><br/>
  </$list>

{{||$:/CommunityExtractedPluginTemplate}}

adsf

<<tabs "[[About Article Tiddlers]] [[Use + Install]] [[Help]]" "[[About Article Tiddlers]]" >>

An ''Article Tiddler'' lets you present multiple tiddlers as a unit. Individual tiddlers therein are analogous to //paragraphs// in an article.


*''Preserve narrative'' - @@color:crimson;font-style:italic;Big deal!@@ Keep the //context// by creating paragraph tiddlers directly at their correct position in the article tiddler. <<stretch "Explanation >"
"""
<br>Normal 'tiddlerization' of information //looses// the narrative, i.e the natural //sequence// that information is presented in at, say, a lecture. In TW we primarily ''post''-organize tiddlers, e.g by //categorizing// or //filtering//, but this does not easily restore a desired //narrative//. But //exact sequence// of content is crucial in many cases, e.g; 

<ul><li>articles, papers, essays, presentational webpages, lecture notes, text annotations, trains-of-thought, stories, etc</li></ul>
In an //article tiddler// the order is preserved by creating the //paragraph tiddlers// directly at the correct position ([[Help]]), where they stay unless you change their position<br>.
""">>

*''Unit handling'' - The full article is managed as one tiddler. <<stretch "Examples >" """
<br><ul><li>Open/close an article with all its paragraph tiddlers as one unit, mid-story river.</li><li>...still, transclusion of an article or a paragraph gets only that tiddlers immediate text content, i.e not its contained paragraphs.</li><li>The sidebar only lists the article titles, not the contained paragraphs.</li><li>...unless a paragraph tiddler is opened separately, of course</li></ul><br>""">>
*''...yet //power o´ tiddly//'' - //Articles// and //paragraphs// are regular tiddlers to re-use, slice and dice.


!!!Demos
*[[GenericArticle]] - boring, explanatory demo
*[[Beyond Terminator]] - fun, realistic demo

!!!Note
The demo paragraphs are //displayed// as "flat-linear", suitable for article-like applications. But by just changing the paragraph //display//, completely <<stretch "different applications" "are possible." """<span>

*''nested + indented'' for discussion threads/forums
**(this is actually why I'm bringing forth this whole concept now; I think a general solution would be useful for my current main concern; TWederation and adding of comments/discussions on other peoples tiddlers.) 
*as ''tabs''... perhaps useful for multiple "versions" of a tiddlers text
**(see [[Versioning|http://versioning.tiddlyspot.com/]] for basic concept)
</span>
"""
>>

<$reveal type="nomatch" state="$:/state/AdminOrVisitor" text="visitor">
<$button set="$:/state/AdminOrVisitor" setTo="visitor" class="tc-btn-invisible" tooltip="Current: Admin mode">A
<$action-setfield admindisplay="none"/>
<$action-setfield $tiddler="$:/core/macros/tabs_" tags=" "/>
<$action-setfield $tiddler="$:/plugins/macros/tablinks/Stylesheet" tags=" "/>
<$action-setfield $tiddler="$:/config/ViewToolbarButtons/Visibility/$:/plugins/TWaddle/SideEditor/Button" text="hide"/>
<$action-setfield $tiddler="$:/config/ViewToolbarButtons/Visibility/TWederation/Buttons/publish" text="hide"/>
</$button>
</$reveal>
<$reveal type="match" state="$:/state/AdminOrVisitor" text="visitor">
<$button set="$:/state/AdminOrVisitor" setTo="admin" class="tc-btn-invisible" tooltip="Visitor mode">V
<$action-setfield admindisplay="block"/>
<$action-setfield $tiddler="$:/core/macros/tabs_" tags="$:/tags/Macro"/>
<$action-setfield $tiddler="$:/plugins/macros/tablinks/Stylesheet" tags="$:/tags/Stylesheet"/>
<$action-setfield $tiddler="$:/config/ViewToolbarButtons/Visibility/$:/plugins/TWaddle/SideEditor/Button" text="show"/>
<$action-setfield $tiddler="$:/config/ViewToolbarButtons/Visibility/TWederation/Buttons/publish" text="show"/>
</$button>
</$reveal>

<$set name="articleTiddler" value=<<storyTiddler>>>
<$list filter="[<currentTiddler>!has[draft.of]has[paragraphs]list[!!paragraphs]]
                   [all[tiddlers]paragraph-in<currentTiddler>!has[draft.of]]"
         history="$:/HistoryList"
         template="Paragraph/ViewTemplate"
         storyview={{$:/view}}
/>
</$set>

*This is excerpted from a Scientific American [[article|http://www.scientificamerican.com/article/beyond-terminator-squishy-octobot-heralds-new-era-of-soft-robotics/]].
*''{{ToggleTiddlerTitles}}''
*[[Stylesheet]]
*...and, yeah, the separator here is a paragraph too ;-)

<span style="border:1px solid silver; padding-right:2em; display:block;">

*This demos ''three different methods'' for displaying the paragraph tiddlers (see [[Use|Use + Install]] for info)
*{{ToggleTiddlerTitles}}

</span>
...so, this is tiddler [[GenericArticle]]. 

[[GenericArticle]] has a field ''paragraphs: {{!!paragraphs}}''

*''New-paragraph-here button'' should appear (or at least be acccessible) between each paragraph to (1) open an editor at that spot and (2) on creation insert the new paragraph title in the articles //paragraphs// field at correct spot.
*''Positioning of //paragraph-in//'' - i.e state in a paragraph where it should show up in the article.
**maybe an equivalent to ''list-before / list-after'' for paragraphs?
** (...maybe even up/down arrow to relocate paragraphs? Absolutely best would be drag'n drop. Same matter for regular tids in story river. )
*''Edit-view'' should open at paragraph position, not open tiddler elsewhere in the story river.
*''Table of Contents'' - i.e article-internal ''jump links''.
** Probably same issue as [[1783|https://github.com/Jermolene/TiddlyWiki5/issues/1783]]
**...I did come up with [[IntLinks|http://intlinks.tiddlyspot.com/]] that works but also changes the browser address url to show only the anchor instead of the tiddler list.
*''...and'' Help likely needed for anything else you think should be featured.

<table class="minimenu"><tr>
<td><span class="minilink" ><$link to="$:/ControlPanel">&#9881;</$link></span></td><td>{{AdminOrVisitorMode}}</td>
<td>{{$:/core/ui/Buttons/save-wiki}}</td>
</tr>
</table>

<style>
.minimenu {opacity:.3; position:fixed;right:1em;top:-1em;;z-index:10000; border:0;}
.minimenu:hover {opacity:1;}
.minilink a {color:gray; font-size:1.3em;}
</style>

\define newParagraphButtonField()
[[$(storyTiddler)$]]
\end
\define newParagraphButton()
<$button tooltip="Create new paragraph" aria-label={{$:/language/Buttons/NewParagraph/Caption}} style="float:right;" class=<<tv-config-toolbar-class>>>
<$action-sendmessage $message="tm-new-tiddler" paragraph-in=<<newParagraphButtonField>>/>
<$list filter="[<tv-config-toolbar-icons>prefix[yes]]">
{{$:/core/images/storyview-pop}}
</$list>
<$list filter="[<tv-config-toolbar-text>prefix[yes]]">
<span class="tc-btn-text"><$text text={{$:/language/Buttons/NewHere/Caption}}/></span>
</$list>
</$button>
\end
<<newParagraphButton>>

\define paragraph-classes()
$(tiddlerTagClasses)$ paragraph
\end
\define folded-state()
$:/state/folded/$(currentTiddler)$
\end

<$set name="tiddlerInfoState" value=<<qualify "$:/state/popup/tiddler-info">>><$tiddler tiddler=<<currentTiddler>>><div class=<<paragraph-classes>>><$list filter="[all[shadows+tiddlers]tag[$:/tags/ViewTemplate]!has[draft.of]]" variable="listItem"><$transclude tiddler=<<listItem>>/>
</$list></div>
</$tiddler></$set>

\define title-styles()
fill:$(foregroundColor)$;
\end
\define config-title()
$:/config/ViewToolbarButtons/Visibility/$(listItem)$
\end
O<div class="tc-tiddler-title">
<div class="tc-titlebar">
<span class="tc-tiddler-controls">
<$list filter="[all[shadows+tiddlers]tag[$:/tags/Paragraph/BottomToolbar]!has[draft.of]]" variable="listItem"><$reveal type="nomatch" state=<<config-title>> text="hide"><$transclude tiddler=<<listItem>>/></$reveal></$list>
</span>
</div>
</div>

This is tiddler [[Paragraph1]]. It is a paragraph in [[GenericArticle]]

*Has a field ''paragraphs: {{!!paragraphs}}''

It is styled with a colored background, which also affects it's sections.

This is [[Paragraph1.1]].

It has ''no pargraph'' and ''no paragraph-in'' field

*not styled with background (but gets its parent background)
**it //can// be styled with another background....<br>and if it were, then its two children (grandchildren of Paragraph1) would have this new background..

This is [[Paragraph1.1.1]].

Has field ''paragraph-in: {{!!paragraph-in}}''

This is [[Paragraph1.1.2]]

Has field ''paragraph-in: {{!!paragraph-in}}''

This is [[Paragraph2]]

Has a field ''paragraph-in: {{!!paragraph-in}}''

By Helen Shen, Nature magazine on August 25, 2016

[ see [[original article|http://www.scientificamerican.com/article/beyond-terminator-squishy-octobot-heralds-new-era-of-soft-robotics/]] for rest ]

Valves and switches in the robot’s brain are positioned to extend the arms in two alternating groups. The process starts when researchers inject fuel into two reservoirs, each dedicated to one group of four arms. These reservoirs expand like balloons and push fuel through the microfluidic circuit. As fuel travels through the circuit, changes in pressure close off some control points and open others, restricting flow to only one half of the system at a time. As that side consumes fuel, its internal pressure decreases, allowing fuel to enter the other side—which then pinches off the first side, and so on.

A squishy octopus-shaped machine less than 2 centimetres tall is making waves in the field of soft robotics. The ‘octobot’ described today in Nature is the first self-contained robot made exclusively of soft, flexible parts.

<iframe width="560" height="315" src="http://www.youtube.com/embed/6Wn66O-KLow" frameborder="0" allowfullscreen></iframe>

Squishy "Octobot" Heralds New Era of Soft Robotics

Ditching conventional electronics and power sources, the pliable robot operates without rigid parts

The octobot is powered by a chemical reaction and controlled with a soft logic board. A reaction inside the bot transforms a small amount of liquid fuel (hydrogen peroxide) into a large amount of gas, which flows into the octobot's arms and inflates them like a balloon. A microfluidic logic circuit, a soft analog of a simple electronic oscillator, controls when hydrogen peroxide decomposes to gas in the octobot. Credit: LORI SANDERS

Interest in soft robots has taken off in recent years, as engineers look beyond rigid Terminator-type machines to designs that can squeeze into tight spaces, mould to their surroundings, or handle delicate objects safely. But engineering soft versions of key parts has challenged researchers. “The brains, the electronics, the batteries—those components were all hard,” says roboticist Daniela Rus at the Massachusetts Institute of Technology in Cambridge. “This work is new and really exciting.”

*Share on Facebook
*Share on Twitter
*Share on Reddit
*Google+
*Stumble Upon
*Email
*Print

The octobot is made of silicone rubber. Its ‘brain’ is a flexible microfluidic circuit that directs the flow of liquid fuel through channels using pressure-activated valves and switches. “It’s an analogy of what would be an electrical circuit normally,” says engineer Robert Wood at Harvard University in Cambridge, Massachusetts, one of the study’s leaders. “Instead of passing electrons around, we're passing liquids and gases.”

.tc-tagged-border {
  outline:1px solid green;
}

.tc-tagged-colored-bg {
  background:#FFFFCC;
}

.paragraph .tc-tiddler-title,.paragraph .tc-tags-wrapper,.paragraph .tc-subtitle {
  display:{{!!title-display}};
}



/* For tiddler Beyond Terminator */

.tc-tagged-Article {
  background: lightyellow; 
}

.tc-tagged-Headline .tc-tiddler-body {
  font-size:2em;line-height:1em;font-family:Impact, Charcoal, sans-serif;
}

.tc-tagged-Headline .tc-tagged-Authors .tc-tiddler-body {
  font-size:1em; line-height:1em; font-family:Arial; text-align:right;
}

.tc-tagged-Lead .tc-tiddler-body {
  font-size:1.2em;
}

.tc-tagged-Authors .tc-tiddler-body {
  color:silver;
}

.tc-tagged-Social .tc-tiddler-body {
  font-size:.9em; position:absolute;background:white;padding-left:0em; padding-right:2em; border:2px solid silver; right:-2em; margin-top:-2em;
}

.tc-tagged-Social .tc-tiddler-body:before {
  content:"&nbsp;Social media&nbsp; ";position:absolute; margin-top:-1em; background:white; border:1px solid pink;.
}

.tc-tagged-ImageCaption .tc-tiddler-body {
  color:gray; font-style:italic;
}

.tc-tagged-Paragraph_text {
  font-family:"Trebuchet MS", Helvetica, sans-serif; color: DarkSlateGray;
}

.tc-tagged-Blocker .tc-tiddler-body {
  height:6em; 
  background: lightgray; background: linear-gradient(transparent, lightgray);
  text-align:center;
}

Hide/show paragraph //tiddler titles// etc - @@color:crimson; Checkbox &nbsp;<$checkbox tiddler="Stylesheet" field="title-display" checked="block" unchecked="none" default="block"></$checkbox> @@ @@color:crimson;font-size:1.5em; 👈@@

.tc-site-title:after {
border:3px dashed crimson; padding:0 .5em; transform:rotate(15deg);position:absolute;margin-top:-1.5em; margin-left:-4em; color:crimson;
content:"Under dev.";font-size:50%;
}

!!!Create an article
The boring demo [[GenericArticle]] shows all ''three methods to turn a tiddler into an article'':

*<<stretch "//paragraph field// in current" "- a direct method" """a //paragraph field// in the current tiddler lists tiddlers that should show up as paragraphs""">>
*<<stretch "//paragraph field// in a paragraph" "- an indirect method" """...if a paragraph tiddler itself has a //paragraph field// with titles, then those are //also// displayed in the article. This displays the "sub-paragraph" in the outer article too.<br>Actually, a paragraph that has paragraphs is really also an article. In the demo, [[Paragraph1]] and [[Paragraph1.1]] are also //article tiddlers// ...in spite of their example titles. """>>
*<<stretch "//paragraph''-in'' field// in paragraph" "- a remote forcing method" """
Paragraphs can be added ''independently of the article tiddler'', by means of a  `paragraph-in` field in the to-be-paragraph. This -@@color:crimson; big deal!@@ - enables imported/fetched tiddlers to show up in the tiddler-to-be-article automatically. (For example a //comments// would show up in the relevant tiddler.)
""">>

!!!Installation
Include the following tiddlers in your wiki

<<bullets "[tag[ArticleTiddlersComponent]]">>

<br>
<$reveal type="nomatch" state="$:/state/Peripherals" text="show">

<$button set="$:/state/Peripherals" setTo="show">Peripheral stuff > </$button>

</$reveal>
<$reveal type="match" state="$:/state/Peripherals" text="show">

<$button set="$:/state/Peripherals" setTo="hide">Peripheral stuff < </$button>


!!!Currently not needed
*[[Stylesheet]] - used in the demos etc

!!!Currently experimental stuff
<<bullets "[tag[xArticleTiddlersComponent]]">>

!!!Stuff not relevant for Article Tiddlers, but used on this site

*StretchText - http://stretchtext.tiddlyspot.com/
*the [[minimenu]] up in right corner showing an A shows, among other stuff, the [[AdminOrVisitorMode]] that is a toggle for
**SideEditor - http://sideeditor.tiddlypsot.com (doesn't work well with 5.1.13 due to flowing river width)
**TabLinks - http://tablinks.tiddlyspot.com


</$reveal>

{{||$:/CommunityExtractedPluginTemplate}}

{{||$:/CommunityExtractedPluginTemplate}}

This tiddler is a test ready to be sabed. Please note that the tiddler does not have any tag right now. Once you save it, it will be tagged with one or more of the existing tags according to the tiddler's text.

Please note that currently the plugin is CaseSensitive.

This is a remake for TW5 of the plugin autotag of tiddlywiki classic created by Eric Shulman.
To be honest, it can not be called a remake since it only includes the only feature that was useful
for me: automatic tagging of tiddlers based on their content. 

The tags are added ''when the tiddler is saved''.
The plugin only add tags that exists already on the wiki. For example, if you have a tag called `tiddler`, or a tag called `test`, when you save a
tiddler with the sentence "This tiddler is just a test" it will be tagged with the tags `tiddler` and `test`.

You can try it out saving the tiddler below.

# Open your wiki in a browser
# Drag this link into your wiki
#> [[$:/plugins/danielo515/autotag]]
# Save your wiki

{{HelloThere}}

This is not an actual tiddler. It is more like a tiddler for holding tags for testing purposes.

{{||$:/CommunityExtractedPluginTemplate}}

{{||$:/CommunityExtractedPluginTemplate}}

The [[BackWallMacro]] affixes images to "the back". This can be used for pure image exposition or as backgrounds to text.

''Demo'' - Scroll down all the way to see the effect.

''Workings''  - The [[BackWallMacro]] styles tiddlers to display as backgrounds. See [[more...|Workings]]

''Installation''<br>

*Get Felix Hayashi's [[TopStoryView|http://topstoryview.tiddlyspot.com/]] plugin. This is nice in itself but it is required for Back Wall (actually for reasons unclear to me), 
*Drag the [[BackWallMacro]] into your TW.

''To use''<br>

*To make a new backwall image:
**give the image a simple name without spaces or special characters. e.g [[cat]]
**tag the image with "backwall"
*To apply backwalls to your normal tiddlers, just tag them with the name of the backwall (e.g "cat").
*Adjust colors of text and text-background;
** in [[BackWallMacro]] change `crimson` and `lightgray`.
**...or if you want one text background, instead of rows, insert `background:lightgray;` in the `.tc-tagged-$(tid)$ .tc-tiddler-body` definition.

A note about ''transparent images''. The [[fish]], [[shark]] and the [[underwaterframe]] have transparent areas (a feature of the png image format). This is in no way necessary to use back-walling but it can give a fun overlay effect like in [[Swimming around with text]] and [[Environment frame]].

BTW, the latter concept can be expanded to make the whole TW background be the environment (e.g [[underwaterback]]) using standard TW background feature (Ctrlpanel>Appearence>Theme Tweaks> Page background image) and then use partially transparent images like [[fish]] to make a nice expose of fishes. (It is also possible to completely style away all irrelevant visible parts of a tiddler, so to have only fishes seen, swimming down the tiddler river. This is all very meta when you consider that a //tiddler// is already a type of fish.)

''Future?''<br>
The original purpose is a scrolling that doesn't make the tiddlers "whizz by". I imagine it's friendlier on the eye. Currently the application is limited to show images as backwalls. 
''I'm hoping to get [[back wall for any type of content|Back wall for any content]] to work.'' (Note: The tiddler text could not be taller than the screen though). I can't quite figure out how to set the text as a background in some equivalent way that styling can set an image as a background.

''Back Wall for arbitrary tiddler content'', not just images - I cannot get this to work. The images are currently CSS'added using the `background:url` property, set to be in fixed position so they stack in z-axis. This style property works for images but it does not accept tiddler content as argument.

The most promising approach I've come up with so far is to "emulate" the `background:url` by making a //second body view template// that merely transcludes the original body text - and then setting this (or the original) to be the fixed background. Annoyingly these don't behave like the images do though.

I suspect a reason is what is mentioned in the CSS Tricks article [[Stacking Order of Multiple Backgrounds|https://css-tricks.com/stacking-order-of-multiple-backgrounds/]] 

>//It's like z-index but this isn't z-index, it's parts of one single element.//

>//I think it's slightly confusing, since it's the opposite of how HTML works naturally. If all elements have the same z-index (and are positioned in some way and overlap) the last element will be on top, not the first.//

[[Here|http://vanseodesign.com/css/css-stack-z-index/]] is a more detailed article on the matter and [[this|http://css-discuss.incutio.com/wiki/Overlapping_And_ZIndex]] one has good stuff on the matter of "contexts".

To illustrate the problem (I think), open the following "quares" that represent "arbitrary content" - and open them in this order; [[red]], [[yellow]] and [[blue]]. In this current tiddler, there's a stylesheet for these to make them appear fixed at top, overlapping. The order in which they overlap is the same as the order in which they appear in the river. Red at lower place in river is rendered last so it is what comes on top. As you scroll you'll see how the square has the same z-index as it's tiddler.

Setting different z-indexes for the squares has no effect because they are in different contexts. I think what is needed is to have the squares be in a common context so that one can set their z-indexes in relation to each others.

...oooor maybe this z-index track is just a [[red herring|https://en.wikipedia.org/wiki/Red_herring]]. At least it's not yellow or blue.

<style>
.aa {box-sizing: border-box;
  position: fixed;
  top: 0;  left: 0;
  width: 320px;
  height: 60px; z-index:inherit;
}

.aa .bb {
    position: absolute;
    padding: 18px 20px; z-index:1;
}
.aa .red {
    right: 3em;
    background:red;  z-index:-1000;
}
.aa .yellow {
right:3em;
   color:red; background:yellow; z-index:10;
}
.tc-tiddler-frame .blue {
    right: 1em;
    background:blue; z-index:;
}
</style>

\define backwall()
<style>
.tc-tagged-$(tid)$ {
  display: block;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  background:url(<$macrocall $name="datauri" title="$(tid)$" $output="text/plain"/>)
                     no-repeat left top fixed;
  height:100vh;
  background-size: contain;
}
.tc-tagged-$(tid)$ .tc-tiddler-body {
  max-height:75vh;overflow-y:auto;
}
.tc-tagged-$(tid)$ .tc-tiddler-body p {
color:crimson;
background:lightgray;
}
</style>
\end

<$list filter="[tag[backwall]]" variable="tid">
<<backwall>>
</$list>

<div class="aa">
  <div class="bb blue">BLUE</div>
</div>

"A cat in a hat."

....really? That's what you teach your offspring?

How about "You're an idiot!". And take this stupid text off my face.

<center><div style="margin-top:4em;margin-left:3em; width:300px;">{{!!info}}</div></center>
<div style="position:absolute; width:100%;left:0;bottom:0em;margin-bottom:-6px;z-index:0;">{{underwaterframe}}</div>
{{!!style}}

<div class="aa">
  <div class="bb red">RED</div>
</div>

{{!!info}}
{{fish}}

Tagged "fish" to get [[fish]] as backwall... which incidentally is a png with transparent bg so the gray TW back color shows through.

The [[BackWallMacro]]...

*is tagged as a PageTemplate to make it active.
*lists the pictures (tiddlers tagged "backwall") and applies styling to them based on their specific tag (dog, fish, cat etc) using the [[tc-tagged method|http://tiddlywiki.com/#How%20to%20apply%20custom%20styles%20by%20tag]].
*The magic to get the image as tiddler background uses the css background property and the TW [[datauri|http://tiddlywiki.com/#datauri%20Macro%20(Examples)]] macro.
*The images themselves (again, tagged "backwall") get their body (i.e the tiddler content, i.e the image) styled with visibility:hidden or you'd get the image showing on top of the same background image.

<div class="aa">
    <div class="bb yellow">YELLOW</div>
</div>

{{||$:/CommunityExtractedPluginTemplate}}

{{||$:/CommunityExtractedPluginTemplate}}

{{||$:/CommunityExtractedPluginTemplate}}

[[list a plugins tiddlers plugin|$:/plugins/bj/struc/readme]]

WidgetTreeViewer

!!note only shallow filters like shown here are supported

Plugin: [[$:/plugins/bj/struc]]

!example usage

```
<$set name="plugintiddler" value="$:/plugins/bj/struc">
<$list filter = "[plugin<plugintiddler>title[$:/plugins/bj/struc/license]fields[]]">

<$view tiddler=<<plugintiddler>> subtiddler="$:/plugins/bj/struc/license" field=<<currentTiddler>> format="text"/> 
</$list>
</$set>
```
!result

<$set name="plugintiddler" value="$:/plugins/bj/struc">
<$list filter = "[plugin<plugintiddler>title[$:/plugins/bj/struc/license]fields[]]">

<$view tiddler=<<plugintiddler>> subtiddler="$:/plugins/bj/struc/license" field=<<currentTiddler>> format="text"/> 
</$list>
</$set>

use of the pop   ([[$:/bjhacks/pop.js]]) widget


```
<$list filter="a b c">

<$list filter="1 2 3">
<<currentTiddler>>
<$pop>
{{!!title}}
</$pop>

</$list></$list>
```



<$list filter="a b c">

<$list filter="1 2 3">
<<currentTiddler>>
<$pop>
{{!!title}}
</$pop>

</$list></$list>

```
<$vars currentTiddler=1>
<$vars currentTiddler=2>
<$vars currentTiddler=3>
currentTiddler is <<currentTiddler>><br>

<$pop><$pop>
currentTiddler is <<currentTiddler>><br>
</$pop></$pop>

</$vars>
</$vars>
</$vars>
```

<$vars currentTiddler=1>
<$vars currentTiddler=2>
<$vars currentTiddler=3>
currentTiddler is <<currentTiddler>><br>

<$pop><$pop>
currentTiddler is <<currentTiddler>><br>
</$pop></$pop>

</$vars>
</$vars>
</$vars>

\define tabsheader(tabsList,default,state:"$:/state/tab",class)
<div class="tw-tab-set $class$">
<div class="tw-tab-buttons $class$">
<$list filter="$tabsList$" variable="currentTab">
<$button set="$:/state/tab<<currentTiddler>>" setTo=<<currentTab>> default="$default$" selectedClass="tw-tab-selected">
<$macrocall $name="currentTab" $type="text/plain" $output="text/plain"/>
</$button>
</$list>
</div><div class="tw-tab-divider $class$"/><div class="tw-tab-content $class$">
</div>
</div>
\end

! Introduction

The widget-tree-viewer widget displays a collapsible view of part the widget tree. 
It is only for demonstration/development - it may not be reliable and should not be used in live wikis.

The view is created upon rendering and is static and there will be a delay while the view is being constructed.

|!Attribute |!Description |
|items  |Json list containing the names of widget fields to be displayed.  |
|name |String specifying the variable name 'set'  around the wikitext to be viewed (note that the variables content must be the same as the name, like x='x')|

! Example - code
```
<$set name="notify" value="notify">

<!--------- this is content to view as a tree--------->
<h3>widgets of testcontent</h3>

<$button set="$:/state/SampleReveal2" setTo="show">Show me</$button>
<$button set="$:/state/SampleReveal2" setTo="hide">Hide me</$button>

<$reveal type="match" state="$:/state/SampleReveal2" text="show">

! This is the revealed content
And this is some text

</$reveal>
<!------------------------------------------------------>

</$set>


----

<$button set="$:/state/SampleReveal1" setTo="show">push to see tree</$button>


<$reveal type="match" state="$:/state/SampleReveal1" text="show">
<$button set="$:/state/SampleReveal1" setTo="hide">close</$button>
<$widget-tree-viewer items='["parseTreeNode","children","variables" ]'  name="notify" />

</$reveal>


```

! Example - rendered
----


<!--------- this is content to view as a tree--------->
<h3>widgets of testcontent</h3>

<$button set="$:/state/SampleReveal2" setTo="show">Show me</$button>
<$button set="$:/state/SampleReveal2" setTo="hide">Hide me</$button>

<$reveal type="match" state="$:/state/SampleReveal2" text="show">

! This is the revealed content
And this is some text

</$reveal>
<!------------------------------------------------------>



----

<$button set="$:/state/SampleReveal1" setTo="show">push to see widget tree</$button>


<$reveal type="match" state="$:/state/SampleReveal1" text="show">
<$button set="$:/state/SampleReveal1" setTo="hide">close</$button>
<$widget-tree-viewer items='["parseTreeNode","children","variables" ]'  name="notify" />

</$reveal>

Type the text for thexxx tiddler '<<qualify $:/temp/deleteeall-1084907871>>'

{{||$:/CommunityExtractedPluginTemplate}}

{{||$:/CommunityExtractedPluginTemplate}}

{{||$:/CommunityExtractedPluginTemplate}}

{{||$:/CommunityExtractedPluginTemplate}}

{{||$:/CommunityExtractedPluginTemplate}}

{{||$:/CommunityExtractedPluginTemplate}}

{{||$:/CommunityExtractedPluginTemplate}}

{{||$:/CommunityExtractedPluginTemplate}}

{{||$:/CommunityExtractedPluginTemplate}}

{{||$:/CommunityExtractedPluginTemplate}}

{{||$:/CommunityExtractedPluginTemplate}}

!Happy x-mas!

<svg width="100%" height="100%" viewBox="0 0 1000 300" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" style="background:white;">
<defs>
<path id="MyPath7" d={{AtrStr!!path}}C 800 100 900 100 900 100/>
</defs>
<use xlink:href="#MyPath7" fill="none" stroke="#ddd"/>plain
<text font-family="'Helvetica Neue', Helvetica, Arial, 'Lucida Grande', sans-serif" font-size="42.5">
<textPath xlink:href="#MyPath7">
====To The  Top=====on the bottom=======================
</textPath>
</text>
</svg>

`
$$$text/plain
<svg width="100%" height="100%" viewBox="0 0 1000 300" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" style="background:white;">
<defs>
<path id="MyPath" d="
$$$

$$$text/vnd.tiddlywiki>text/plain
{{AtrStr!!path}} C 800 100 900 100 900 100
$$$

$$$text/plain
"/>
</defs>
<use xlink:href="#MyPath" fill="none" stroke="#ddd"/>plain
<text font-family="'Helvetica Neue', Helvetica, Arial, 'Lucida Grande', sans-serif" font-size="42.5">
<textPath xlink:href="#MyPath">
====To The  Top=====on the bottom=======================
</textPath>
</text>
</svg>
$$$
`

{
  "parserrules": {
    "pragmaRuleList": [],
    "blockRuleList": [
      "html"
    ],
    "inlineRuleList": [
      "html",
      "prettylink",
      "transcludeinline",
      "wikilink"
    ]
  },
  "baserules": "",
  "preparser": "text/x-preparser<B>text/plain"
}

!!Parameter:
*`state`: the tiddler to watch
*`text`: the text to match against the contents of the tiddler given by state

below is a demo of the `<$click>` widget clicking all links in a list.
It watches for writes to tiddler specified in 'state' and clicks when the it sees the contents matches that specified by'text'

!!Demo
Enter taglistdemo in the box

<$button set=<<qualify "$:/state">> setTo="open">Open all tagged</$button> <$edit-text tiddler="$:/temp/openall" tag="input" type="text"/> <$list filter="[!has[draft.of]tag{$:/temp/openall}sort[created]]"> <$link><$click state=<<qualify "$:/state">> text="open"/> </$link> </$list>


!!Demo code

`
<$button set=<<qualify "$:/state">> setTo="open">Open all tagged</$button> <$edit-text tiddler="$:/temp/openall" tag="input" type="text"/> 
<$list filter="[!has[draft.of]tag{$:/temp/openall}sort[created]]"> 
<$link><$click state=<<qualify "$:/state">> text="open"/> </$link> 
</$list>
`

!!Macros

I have produced 3 macros that use this widget

`<<openAllTagged>>` this produces a text box for the user to enter a tag and a button to press to open all tiddlers with the tag in the  Story.


`<<closeAllTagged>>` this produces a text box for the user to enter a tag and a button to press to close all tiddlers with the tag in the  Story.

These 2 will be added to the global macros when the plugin is installed

There is also a [[deleteAllTagged]] macro, due to its dangerous nature I have only included the text -  it is not suitable for using globally - If you use it at all I would advise only install it into its own tiddler.

\define deleteAllTaggedInner( state:"$:/state/deletetagged" )
<$button set=<<qualify '$state$'>> setTo="delete">delete all tagged</$button> 
<$edit-text tiddler="$(usertagdelete)$" tag="input" type="text"/>
<$linkcatcher message=tm-delete-tiddler>
<$list filter="[!has[draft.of]tag{$(usertagdelete)$}sort[created]]">
<$link><$click type="match" state=<<qualify "$state$">> text="delete"/> </$link>
</$list>
</$linkcatcher>
\end

\define deleteAllTagged(userparam:"$:/temp/deleteeall" state:"$:/state/deletetagged" )
<$set name="usertagdelete" value=<<qualify "$userparam$">>>
<<deleteAllTaggedInner $state$>>
\end
<<deleteAllTagged>>

\define bulletList(tag)
{{$tag$}}

<ul><$list filter="[tag[$tag$]]"><li><$link to={{!!title}}><$view field="title"/></$link></li></$list></ul>
\end
This is the main documentation hub for TiddlyWiki. See also [[TiddlyWiki for Developers]].

! How to use ~TiddlyWiki5

<<bulletList "howto">>

! Concepts

<<bulletList "concepts">>

! Wiki Text Rules

<<bulletList "wikitext">>

! Widgets

<<bulletList "widget">>

! Commands

<<bulletList "command">>

! Tips

<<bulletList "tips">>

! Miscellaneous

* ReportingBugs
* JeremyRuston (aka [[Jermolene]])
* FederatialLimited
* [[Acknowledgements]]

\define x(a) this $a$
\define y(b) that $b$

<<y a>>

<<x b>>

<<x """((x b))""">>
<<x ((y """((hg)'''')"""))>>
<<x ((y """((b)'''')""" ))>>
<<y ((y x)) v>>

<<y ((x {{west}} ))>>

<h2>Demo</h2>
<p>Try the demo here: VisualEditorDemo</p>
<h2>Installation</h2>
<p>This widget uses the ckeditor lib - the 'command' to load it is in the tiddler [[$:/plugin/bj/visualeditor/includelib]] - and it needs to point to a new location, where you will load the library from. To avoid querks with loading the library from the web include the library from your computer (the library can be obtained from http://ckeditor.com/download):</p>
<p>For linux</p>
<p>&lt;script src="file:///yourpath/ckeditor/ckeditor.js"&gt;&lt;/script&gt;</p>
<p>For windows</p>
<p>&lt;script src="file://c/yourpath/ckeditor/ckeditor.js"&gt;&lt;/script&gt;</p>
<p>where 'yourpath' is the path to where you have put the ckeditor download.</p>
<p>Then reload your tiddlywiki.</p>
<p>Also be aware that the editor strips newline characters, this means it cannot&nbsp; be used with some wiki text (it is probably a bad idea to try and mix wiki text with text produced in the visualeditor).</p>
<p>There is a new type for tiddlers using this plugin: text/x-htmlp, select it from the dropdown type menu when you create a new tiddler.</p>
<h2>&nbsp;</h2>
<h2>Configuration Tiddlers</h2>
<p>The tiddler&nbsp;<a class="tc-tiddlylink tc-tiddlylink-shadow" href="http://127.0.0.1:8080/#%24%3A%2Fplugins%2Fbj%2Fvisualeditor%2Fconfig.json">$:/plugins/bj/visualeditor/config.json</a> contains user adjustable values, such as changing how the menu bar appears.</p>
<p>The tiddler&nbsp;<a class="tc-tiddlylink tc-tiddlylink-shadow" href="http://127.0.0.1:8080/#%24%3A%2Fplugins%2Fbj%2Fvisualeditor%2Fstyles.json">$:/plugins/bj/visualeditor/styles.json</a> defines the entries in the 'Styles' drop down menu, which define styles that can be applied to selected text. The tiddler [[alternative/styles.json]] contains some alternative definition that could be cut and pasted in this config tiddler</p>
<p><span class="verbatim">&lt;&lt;version&gt;&gt;</span></p>

<h1><span style="background-color:Red">Visual</span><span style="background-color:Yellow"> Editing</span></h1>
<p>This was created with the visual editor for text/html tiddlers (ckeditor), hit the edit button to give it a try!!</p>
<p><img alt="Screen Shot 2014-05-03 at 10.57.17 AM" class="aligncenter size-medium wp-image-2407" src="http://fluent-forever.com/wp-content/uploads/2014/05/Screen-Shot-2014-05-03-at-10.57.17-AM-300x215.png" style="height:215px; width:300px" /></p>
<p>&nbsp;</p>
<p>&nbsp;</p>

A variation on the list widget, the taglist widget doesn't have filters - it only lists  tiddlers with a given tag. The resultant list items can be dragged up and down the list causing a re-ordering. Tiddler links can be dragged onto the list, causing that tiddler to be tagged and inserted into the list.

Try out the demo TagListDemo.
See it in action : [[Tw5Info]]

item to add to list [[taglistdemo]]

<$edit-html tiddler="test" field="text"/>

Modification to the edit, and edit-text widget. Added option "onkeyupdate" with values "yes", "no" that set the update event to each key press or once the user move off the entry (yes is the  default). Also modified the 'body' template to select onkeyupdate only in preview mode.

WARNING: there is currently a bug related to this plugin that will stop files syncing between node.js and the browser, do not use this plugin if you are going to use "server.js" or something similar

This approach was first proposed by Stephan Hradek in a pull request

The Calendar macro is configurable via the file [[$:/config/bj/Calendar.json]], and is extendable by plug-in formatter modules, which enable it to be used in different applications.
A side bar tab is created via the tiddler [[$:/plugins/bj/calendar/sidbar]] containing a calendar configured for journal tiddlers.

The calander macro is extended by the diary macro and used the same options and configuration tiddler, but allows for journals to be create in the future.

Example usage:

`
!!Plain Calendar Format 
<<calendar "2014" "2" plain>>

!!Default Calendar Format (for Journal tiddlers)
<<calendar "" "" >>

!!A years diary
<<diary 2014 "" >>
`

Renders as:

!!Plain Calendar Format 
<<calendar "2014" "2" plain>>
!!Default Calendar Format (for Journal tiddlers)
<<calendar "" "" >>
!!A years diary
<<diary 2014 "" >>

The Flexibility Plugin extends the types supported in tiddlywiki. A standard type for example is **text/vnd.tiddlywiki**. The extension has the form **text/vnd.tiddlywiki;flexiblity=Atiddler** and**Atiddler** contains options to extend tiddlytext or allow text to be reparsed. 

<<tabs "[[Flexitype Extended Type Demo]] [[Flexitype Repass Demo]]" "Flexitype Extended Type Demo">>

Wikitext is defined in tiddlywiki using parser rules.  Flexitype allows these rules to be argmented and/or substituted with new rule. See [[Using new wikirules]]

In the example below rules are substituted or changed for new rules. The type of the tiddler is "text/vnd.twbase;flexibility=MDL" where [[MDL]] is the tiddler choosing the rules.

{{$:/plugins/bj/markdownlike/readme}}

In the example below text is reparsed. The type is **text/vnd.tiddlywiki;flexiblity=svgtp** - see the tidder [[svgtp]]

This example show how to concatenate data transcluded from an attribute string, something that cannot be done with **text/vnd.tiddlywiki**. In the svg drawing (see AtrStrSource) the path data is transcluded from a field and concatenated with extra data:

`{{AtrStr!!path}} C 800 100 900 100 900 100`

With regular wiki text the concatenation fails and we have

{{AtrStr vnd.tiddlywiki}}

whereas with the reparsed wikitext we have

{{AtrStr}}

#Summary

Start a line using exclamation marks to create headings.

#Markup
```
#Heading Level 1
##Heading Level 2
###Heading Level 3
####Heading Level 4
#####Heading Level 5
######Heading Level 6
```
#Heading Level 1
##Heading Level 2
###Heading Level 3
####Heading Level 4
#####Heading Level 5
######Heading Level 6

<$include docsheader/>

! How to use ~TiddlyWiki5

<<bulletList "howto">>

<html><br>pageref="<a class="externalLink" href="https://github.com/Jermolene/TiddlyWiki5/issues/82" title="External link to https://github.com/Jermolene/TiddlyWiki5/issues/82" target="_blank">https://github.com/Jermolene/TiddlyWiki5/issues/82</a>" <br><br>date="Thursday, December 19th, 2013 at 9:51:10 am"<br><h1></h1><span>If you want to switch to raw HTML, and suppress wikitext parsing, you can
now do so by embedding it like this:

```
$$$.html
<div>
one two
three four

five six
</div>
$$$
```

MarkDownLike depends upon 	the flexitype plugin ($:/plugins/bj/flexitype), which therefore needs to be also copied (or dragged) to your tiddlywiki along with $:/plugins/bj/plugins/markdownlike

 item on list

item y on list

item z on list

Try editing these examples: [[A menu system]] [[Employee data]].
Note that on keypress updating is disabled as a default, there is a 'set value' button that is used to enter values. The default can be changed by editing the option file:[[$:/plugins/bj/jsoneditor/options.json]]. On keypress updating may be slow due to the editor compiling the json.

~MarkDown: Extended
=================
What you are seeing here is the tabs macro working in extended markdown, using the tiddlers [[Code]]  and [[Phrase Emphasis]]


[=[tabs 'Code[[Phrase Emphasis]]' 'Phrase Emphasis' '$:/state/tab1']]=]

MarkDown: [[Basics]]
================

{{ParagraphsMD}}

### Phrase Emphasis ###

Markdown uses asterisks and underscores to indicate spans of emphasis.

Markdown:

    Some of these words *are emphasized*.
    Some of these words _are emphasized also_.
    
    Use two asterisks for **strong emphasis**.
    Or, if you prefer, __use two underscores instead__.

Output:

    <p>Some of these words <em>are emphasized</em>.
    Some of these words <em>are emphasized also</em>.</p>
    
    <p>Use two asterisks for <strong>strong emphasis</strong>.
    Or, if you prefer, <strong>use two underscores instead</strong>.</p>
   


## Lists ##

Unordered (bulleted) lists use asterisks, pluses, and hyphens (`*`,
`+`, and `-`) as list markers. These three markers are
interchangable; this:

    *   Candy.
    *   Gum.
    *   Booze.

this:

    +   Candy.
    +   Gum.
    +   Booze.

and this:

    -   Candy.
    -   Gum.
    -   Booze.

all produce the same output:

    <ul>
    <li>Candy.</li>
    <li>Gum.</li>
    <li>Booze.</li>
    </ul>

Ordered (numbered) lists use regular numbers, followed by periods, as
list markers:

    1.  Red
    2.  Green
    3.  Blue

Output:

    <ol>
    <li>Red</li>
    <li>Green</li>
    <li>Blue</li>
    </ol>

If you put blank lines between items, you'll get `<p>` tags for the
list item text. You can create multi-paragraph list items by indenting
the paragraphs by 4 spaces or 1 tab:

    *   A list item.
    
        With multiple paragraphs.

    *   Another item in the list.

Output:

    <ul>
    <li><p>A list item.</p>
    <p>With multiple paragraphs.</p></li>
    <li><p>Another item in the list.</p></li>
    </ul>
    


### Links ###

Markdown supports two styles for creating links: *inline* and
*reference*. With both styles, you use square brackets to delimit the
text you want to turn into a link.

Inline-style links use parentheses immediately after the link text.
For example:

    This is an [example link](http://example.com/).

Output:

    <p>This is an <a href="http://example.com/">
    example link</a>.</p>

Optionally, you may include a title attribute in the parentheses:

    This is an [example link](http://example.com/ "With a Title").

Output:

    <p>This is an <a href="http://example.com/" title="With a Title">
    example link</a>.</p>

Reference-style links allow you to refer to your links by names, which
you define elsewhere in your document:

    I get 10 times more traffic from [Google][1] than from
    [Yahoo][2] or [MSN][3].

    [1]: http://google.com/        "Google"
    [2]: http://search.yahoo.com/  "Yahoo Search"
    [3]: http://search.msn.com/    "MSN Search"

Output:

    <p>I get 10 times more traffic from <a href="http://google.com/"
    title="Google">Google</a> than from <a href="http://search.yahoo.com/"
    title="Yahoo Search">Yahoo</a> or <a href="http://search.msn.com/"
    title="MSN Search">MSN</a>.</p>

The title attribute is optional. Link names may contain letters,
numbers and spaces, but are *not* case sensitive:

    I start my morning with a cup of coffee and
    [The New York Times][NY Times].

    [ny times]: http://www.nytimes.com/

Output:

    <p>I start my morning with a cup of coffee and
    <a href="http://www.nytimes.com/">The New York Times</a>.</p>


### Images ###

Image syntax is very much like link syntax.

Inline (titles are optional):

    ![alt text](/path/to/img.jpg "Title")

Reference-style:

    ![alt text][id]

    [id]: /path/to/img.jpg "Title"

Both of the above examples produce the same output:

    <img src="/path/to/img.jpg" alt="alt text" title="Title" />



### Code ###

In a regular paragraph, you can create code span by wrapping text in
backtick quotes. Any ampersands (`&`) and angle brackets (`<` or
`>`) will automatically be translated into HTML entities. This makes
it easy to use Markdown to write about HTML example code:

    I strongly recommend against using any `<blink>` tags.

    I wish SmartyPants used named entities like `&mdash;`
    instead of decimal-encoded entites like `&#8212;`.

Output:

    <p>I strongly recommend against using any
    <code>&lt;blink&gt;</code> tags.</p>
    
    <p>I wish SmartyPants used named entities like
    <code>&amp;mdash;</code> instead of decimal-encoded
    entites like <code>&amp;#8212;</code>.</p>


To specify an entire block of pre-formatted code, indent every line of
the block by 4 spaces or 1 tab. Just like with code spans, `&`, `<`,
and `>` characters will be escaped automatically.

Markdown:

    If you want your page to validate under XHTML 1.0 Strict,
    you've got to put paragraph tags in your blockquotes:

        <blockquote>
            <p>For example.</p>
        </blockquote>

Output:

    <p>If you want your page to validate under XHTML 1.0 Strict,
    you've got to put paragraph tags in your blockquotes:</p>
    
    <pre><code>&lt;blockquote&gt;
        &lt;p&gt;For example.&lt;/p&gt;
    &lt;/blockquote&gt;
    </code></pre>

MarkDown: [[Basics]]
================
a  [=[version]=]
{{ParagraphsMDs}}

### Phrase Emphasis ###

Markdown uses asterisks and underscores to indicate spans of emphasis.

Markdown:

    Some of these words *are emphasized*.
    Some of these words _are emphasized also_.
    
    Use two asterisks for **strong emphasis**.
    Or, if you prefer, __use two underscores instead__.

Output:

    <p>Some of these words <em>are emphasized</em>.
    Some of these words <em>are emphasized also</em>.</p>
    
    <p>Use two asterisks for <strong>strong emphasis</strong>.
    Or, if you prefer, <strong>use two underscores instead</strong>.</p>
   


## Lists ##

Unordered (bulleted) lists use asterisks, pluses, and hyphens (`*`,
`+`, and `-`) as list markers. These three markers are
interchangable; this:

    *   Candy.
    *   Gum.
    *   Booze.

this:

    +   Candy.
    +   Gum.
    +   Booze.

and this:

    -   Candy.
    -   Gum.
    -   Booze.

all produce the same output:

 -   Candy.
 -   Gum.
 -   Booze.


Ordered (numbered) lists use regular numbers, followed by periods, as
list markers:

    1.  Red
    2.  Green
    3.  Blue

Output:

1.  Red
2.  Green
3.  Blue

If you put blank lines between items, you'll get `<p>` tags for the
list item text. You can create multi-paragraph list items by indenting
the paragraphs by 4 spaces or 1 tab:

    *   A list item.
    
        With multiple paragraphs.

    *   Another item in the list.

Output:

*   A list item.
    
    With multiple paragraphs.
*   Another item in the list.
    


### Links ###

Markdown supports two styles for creating links: *inline* and
*reference*. With both styles, you use square brackets to delimit the
text you want to turn into a link.

Inline-style links use parentheses immediately after the link text.
For example:

    This is an [example link](http://example.com/).

Output:

    <p>This is an <a href="http://example.com/">
    example link</a>.</p>

Optionally, you may include a title attribute in the parentheses:

    This is an [example link](http://example.com/ "With a Title").

Output:

    <p>This is an <a href="http://example.com/" title="With a Title">
    example link</a>.</p>

Reference-style links allow you to refer to your links by names, which
you define elsewhere in your document:

    I get 10 times more traffic from [Google][1] than from
    [Yahoo][2] or [MSN][3].

    [1]: http://google.com/        "Google"
    [2]: http://search.yahoo.com/  "Yahoo Search"
    [3]: http://search.msn.com/    "MSN Search"

Output:

    <p>I get 10 times more traffic from <a href="http://google.com/"
    title="Google">Google</a> than from <a href="http://search.yahoo.com/"
    title="Yahoo Search">Yahoo</a> or <a href="http://search.msn.com/"
    title="MSN Search">MSN</a>.</p>

The title attribute is optional. Link names may contain letters,
numbers and spaces, but are *not* case sensitive:

    I start my morning with a cup of coffee and
    [The New York Times][NY Times].

    [ny times]: http://www.nytimes.com/

Output:

    <p>I start my morning with a cup of coffee and
    <a href="http://www.nytimes.com/">The New York Times</a>.</p>


### Images ###

MarkDown List
=================
[==[list-links filter$]==]f

```
<h1>
```

<h1 id="test">test</h1>
[=[version]=]

MarkDown List
=================
[=[list-links filter:'[tag[MdExtendDemoDocs]]']=]

<h1 id="test">test</h1>
[=[version]=]

This is a variation of the markdown syntax - documentation see https://github.com/chjj/marked 

Example [[Marked Ex1]]

use type: "text/x-marked" 

For advanced options see: $:/plugins/bj/plugins/marked/readme

Colons can be used to align columns.

|Tables        | Are           | Cool |
|:-------------|:-------------:| -----:|
| col 3 is      | right-aligned | $1600 |
| col 2 is      | centered      |   $12 |
| zebra stripes | are neat      |    $1 |

The outer pipes (|) are optional, and you don't need to make the raw Markdown line up prettily. You can also use inline Markdown.

Markdown | Less | Pretty
--- | --- | ---
*Still* | `renders` | **nicely**
1 | 2 | 3

Markdown: Basics
================

Getting the Gist of Markdown's Formatting Syntax
------------------------------------------------

This page offers a brief overview of what it's like to use Markdown.
The [syntax page] [s] provides complete, detailed documentation for
every feature, but Markdown should be very easy to pick up simply by
looking at a few examples of it in action. The examples on this page
are written in a before/after style, showing example syntax and the
HTML output produced by Markdown.

It's also helpful to simply try Markdown out; the [Dingus] [d] is a
web application that allows you type your own Markdown-formatted text
and translate it to XHTML.

**Note:** This document is itself written using Markdown; you
can [see the source for it by adding '.text' to the URL] [src].

  [s]: /projects/markdown/syntax  "Markdown Syntax"
  [d]: /projects/markdown/dingus  "Markdown Dingus"
  [src]: /projects/markdown/basics.text


## Paragraphs, Headers, Blockquotes ##

A paragraph is simply one or more consecutive lines of text, separated
by one or more blank lines. (A blank line is any line that looks like
a blank line -- a line containing nothing but spaces or tabs is
considered blank.) Normal paragraphs should not be indented with
spaces or tabs.

Markdown offers two styles of headers: *Setext* and *atx*.
Setext-style headers for `<h1>` and `<h2>` are created by
"underlining" with equal signs (`=`) and hyphens (`-`), respectively.
To create an atx-style header, you put 1-6 hash marks (`#`) at the
beginning of the line -- the number of hashes equals the resulting
HTML header level.

Blockquotes are indicated using email-style '`>`' angle brackets.

Markdown:

A First Level Header
====================

A Second Level Header
---------------------

Now is the time for all good men to come to
the aid of their country. This is just a
regular paragraph.

The quick brown fox jumped over the lazy
dog's back.

### Header 3

> This is a blockquote.
> 
> This is the second paragraph in the blockquote.
>
> ## This is an H2 in a blockquote


Output:

<h1>A First Level Header</h1>

<h2>A Second Level Header</h2>

<p>Now is the time for all good men to come to
the aid of their country. This is just a
regular paragraph.</p>

<p>The quick brown fox jumped over the lazy
dog's back.</p>

<h3>Header 3</h3>

<blockquote>
<p>This is a blockquote.</p>

<p>This is the second paragraph in the blockquote.</p>

<h2>This is an H2 in a blockquote</h2>
</blockquote>



### Phrase Emphasis ###

Markdown uses asterisks and underscores to indicate spans of emphasis.

Markdown:

Some of these words *are emphasized*.
Some of these words _are emphasized also_.

Use two asterisks for **strong emphasis**.
Or, if you prefer, __use two underscores instead__.

Output:

<p>Some of these words <em>are emphasized</em>.
Some of these words <em>are emphasized also</em>.</p>

<p>Use two asterisks for <strong>strong emphasis</strong>.
Or, if you prefer, <strong>use two underscores instead</strong>.</p>
   


## Lists ##

Unordered (bulleted) lists use asterisks, pluses, and hyphens (`*`,
`+`, and `-`) as list markers. These three markers are
interchangable; this:

*   Candy.
*   Gum.
*   Booze.

this:

+   Candy.
+   Gum.
+   Booze.

and this:

-   Candy.
-   Gum.
-   Booze.

all produce the same output:

<ul>
<li>Candy.</li>
<li>Gum.</li>
<li>Booze.</li>
</ul>

Ordered (numbered) lists use regular numbers, followed by periods, as
list markers:

1.  Red
2.  Green
3.  Blue

Output:

<ol>
<li>Red</li>
<li>Green</li>
<li>Blue</li>
</ol>

If you put blank lines between items, you'll get `<p>` tags for the
list item text. You can create multi-paragraph list items by indenting
the paragraphs by 4 spaces or 1 tab:

*   A list item.

With multiple paragraphs.

*   Another item in the list.

Output:

<ul>
<li><p>A list item.</p>
<p>With multiple paragraphs.</p></li>
<li><p>Another item in the list.</p></li>
</ul>



### Links ###

Markdown supports two styles for creating links: *inline* and
*reference*. With both styles, you use square brackets to delimit the
text you want to turn into a link.

Inline-style links use parentheses immediately after the link text.
For example:

This is an [example link](http://example.com/).

Output:

<p>This is an <a href="http://example.com/">
example link</a>.</p>

Optionally, you may include a title attribute in the parentheses:

This is an [example link](http://example.com/ "With a Title").

Output:

<p>This is an <a href="http://example.com/" title="With a Title">
example link</a>.</p>

Reference-style links allow you to refer to your links by names, which
you define elsewhere in your document:

I get 10 times more traffic from [Google][1] than from
[Yahoo][2] or [MSN][3].

[1]: http://google.com/"Google"
[2]: http://search.yahoo.com/  "Yahoo Search"
[3]: http://search.msn.com/"MSN Search"

Output:

<p>I get 10 times more traffic from <a href="http://google.com/"
title="Google">Google</a> than from <a href="http://search.yahoo.com/"
title="Yahoo Search">Yahoo</a> or <a href="http://search.msn.com/"
title="MSN Search">MSN</a>.</p>

The title attribute is optional. Link names may contain letters,
numbers and spaces, but are *not* case sensitive:

I start my morning with a cup of coffee and
[The New York Times][NY Times].

[ny times]: http://www.nytimes.com/

Output:

<p>I start my morning with a cup of coffee and
<a href="http://www.nytimes.com/">The New York Times</a>.</p>


### Images ###

Image syntax is very much like link syntax.

Inline (titles are optional):

![alt text](/path/to/img.jpg "Title")

Reference-style:

![alt text][id]

[id]: /path/to/img.jpg "Title"

Both of the above examples produce the same output:

<img src="/path/to/img.jpg" alt="alt text" title="Title" />



### Code ###

In a regular paragraph, you can create code span by wrapping text in
backtick quotes. Any ampersands (`&`) and angle brackets (`<` or
`>`) will automatically be translated into HTML entities. This makes
it easy to use Markdown to write about HTML example code:

I strongly recommend against using any `<blink>` tags.

I wish SmartyPants used named entities like `&mdash;`
instead of decimal-encoded entites like `&#8212;`.

Output:

<p>I strongly recommend against using any
<code>&lt;blink&gt;</code> tags.</p>

<p>I wish SmartyPants used named entities like
<code>&amp;mdash;</code> instead of decimal-encoded
entites like <code>&amp;#8212;</code>.</p>


To specify an entire block of pre-formatted code, indent every line of
the block by 4 spaces or 1 tab. Just like with code spans, `&`, `<`,
and `>` characters will be escaped automatically.

Markdown:

If you want your page to validate under XHTML 1.0 Strict,
you've got to put paragraph tags in your blockquotes:

<blockquote>
<p>For example.</p>
</blockquote>

Output:

<p>If you want your page to validate under XHTML 1.0 Strict,
you've got to put paragraph tags in your blockquotes:</p>

<pre><code>&lt;blockquote&gt;
&lt;p&gt;For example.&lt;/p&gt;
&lt;/blockquote&gt;
</code></pre>

# Markdown: Basics

## Getting the Gist of Markdown's Formatting Syntax


This page offers a brief overview of what it's like to use Markdown.
The [syntax page] [s] provides complete, detailed documentation for
every feature, but Markdown should be very easy to pick up simply by
looking at a few examples of it in action. The examples on this page
are written in a before/after style, showing example syntax and the
HTML output produced by Markdown.

It's also helpful to simply try Markdown out; the [Dingus] [d] is a
web application that allows you type your own Markdown-formatted text
and translate it to XHTML.

**Note:** This document is itself written using Markdown; you
can [see the source for it by adding '.text' to the URL] [src].

  [s]: /projects/markdown/syntax  "Markdown Syntax"
  [d]: /projects/markdown/dingus  "Markdown Dingus"
  [src]: /projects/markdown/basics.text


## Paragraphs, Headers, Blockquotes 

A paragraph is simply one or more consecutive lines of text, separated
by one or more blank lines. (A blank line is any line that looks like a
blank line -- a line containing nothing spaces or tabs is considered
blank.) Normal paragraphs should not be intended with spaces or tabs.

Markdown offers two styles of headers: **Setext** and **atx**.
Setext-style headers for `<h1>` and `<h2>` are created by
"underlining" with equal signs (`=`) and hyphens (`-`), respectively.
To create an atx-style header, you put 1-6 hash marks (`#`) at the
beginning of the line -- the number of hashes equals the resulting
HTML header level.

Blockquotes are indicated using email-style '`>`' angle brackets.

Markdown:

    # A First Level Header
    
    ## A Second Level Header

    Now is the time for all good men to come to
    the aid of their country. This is just a
    regular paragraph.

    The quick brown fox jumped over the lazy
    dog's back.

### Header 3

    > This is a blockquote.
    > 
    > This is the second paragraph in the blockquote.
    >
    > ## This is an H2 in a blockquote


Output:

    <h1>A First Level Header</h1>
    
    <h2>A Second Level Header</h2>
    
    <p>Now is the time for all good men to come to
    the aid of their country. This is just a
    regular paragraph.</p>
    
    <p>The quick brown fox jumped over the lazy
    dog's back.</p>
    
    <h3>Header 3</h3>
    
    <blockquote>
        <p>This is a blockquote.</p>
        
        <p>This is the second paragraph in the blockquote.</p>
        
        <h2>This is an H2 in a blockquote</h2>
    </blockquote>



### Phrase Emphasis 

Markdown uses asterisks and underscores to indicate spans of emphasis.

Markdown:
    
    Use two asterisks for **strong emphasis**.

Output:

    <p>Some of these words <em>are emphasized</em>.
    Some of these words <em>are emphasized also</em>.</p>
    
    <p>Use two asterisks for <strong>strong emphasis</strong>.
    Or, if you prefer, <strong>use two underscores instead</strong>.</p>
   


## Lists 

Unordered (bulleted) lists use asterisks, pluses, and hyphens (`*`,
`+`, and `-`) as list markers. These three markers are
interchangable; this:

    +   Candy.
    +   Gum.
    +   Booze.

all produce the same output:

    <ul>
    <li>Candy.</li>
    <li>Gum.</li>
    <li>Booze.</li>
    </ul>

Ordered (numbered) lists use regular numbers, followed by periods, as
list markers:

    1.  Red
    2.  Green
    3.  Blue

Output:

    <ol>
    <li>Red</li>
    <li>Green</li>
    <li>Blue</li>
    </ol>

If you put blank lines between items, you'll get `<p>` tags for the
list item text. You can create multi-paragraph list items by indenting
the paragraphs by 4 spaces or 1 tab:

    +   A list item.
    
        With multiple paragraphs.

    +   Another item in the list.

Output:

    <ul>
    <li><p>A list item.</p>
    <p>With multiple paragraphs.</p></li>
    <li><p>Another item in the list.</p></li>
    </ul>
    


### Links

Markdown supports two styles for creating links: *inline* and
*reference*. With both styles, you use square brackets to delimit the
text you want to turn into a link.

Inline-style links use parentheses immediately after the link text.
For example:

    This is an [example link](http://example.com/).

Output:

    <p>This is an <a href="http://example.com/">
    example link</a>.</p>

Optionally, you may include a title attribute in the parentheses:

    This is an [example link](http://example.com/ "With a Title").

Output:

    <p>This is an <a href="http://example.com/" title="With a Title">
    example link</a>.</p>

Reference-style links allow you to refer to your links by names, which
you define elsewhere in your document:

    I get 10 times more traffic from [Google][1] than from
    [Yahoo][2] or [MSN][3].

    [1]: http://google.com/        "Google"
    [2]: http://search.yahoo.com/  "Yahoo Search"
    [3]: http://search.msn.com/    "MSN Search"

Output:

    <p>I get 10 times more traffic from <a href="http://google.com/"
    title="Google">Google</a> than from <a href="http://search.yahoo.com/"
    title="Yahoo Search">Yahoo</a> or <a href="http://search.msn.com/"
    title="MSN Search">MSN</a>.</p>

The title attribute is optional. Link names may contain letters,
numbers and spaces, but are *not* case sensitive:

    I start my morning with a cup of coffee and
    [The New York Times][NY Times].

    [ny times]: http://www.nytimes.com/

Output:

    <p>I start my morning with a cup of coffee and
    <a href="http://www.nytimes.com/">The New York Times</a>.</p>


### Images ###

Image syntax is very much like link syntax.

Inline (titles are optional):

    ![alt text](/path/to/img.jpg "Title")

Reference-style:

    ![alt text][id]

    [id]: /path/to/img.jpg "Title"

Both of the above examples produce the same output:

    <img src="/path/to/img.jpg" alt="alt text" title="Title" />



### Code 

In a regular paragraph, you can create code span by wrapping text in
backtick quotes. Any ampersands (`&`) and angle brackets (`<` or
`>`) will automatically be translated into HTML entities. This makes
it easy to use Markdown to write about HTML example code:

    I strongly recommend against using any `<blink>` tags.

    I wish SmartyPants used named entities like `&mdash;`
    instead of decimal-encoded entites like `&#8212;`.

Output:

    <p>I strongly recommend against using any
    <code>&lt;blink&gt;</code> tags.</p>
    
    <p>I wish SmartyPants used named entities like
    <code>&amp;mdash;</code> instead of decimal-encoded
    entites like <code>&amp;#8212;</code>.</p>


To specify an entire block of pre-formatted code, indent every line of
the block by 4 spaces or 1 tab. Just like with code spans, `&`, `<`,
and `>` characters will be escaped automatically.

Markdown:

    If you want your page to validate under XHTML 1.0 Strict,
    you've got to put paragraph tags in your blockquotes:

        <blockquote>
            <p>For example.</p>
        </blockquote>

Output:

    <p>If you want your page to validate under XHTML 1.0 Strict,
    you've got to put paragraph tags in your blockquotes:</p>
    
    <pre><code>&lt;blockquote&gt;
        &lt;p&gt;For example.&lt;/p&gt;
    &lt;/blockquote&gt;
    </code></pre>

|width:250px; !Example | !Example Markup |h
| how the example markup renders | what to enter as tiddler text |
|>| ![[Basic Text Formatting|Basic Formatting]] |
|''bold''|{{{''bold''}}} (two __single__-quotes) |
|//italics//|{{{//italics//}}} |
|''//bold italics//''|{{{''//bold italics//''}}} |
|__underline__|{{{__underline__}}} |
|--strikethrough--|{{{--strikethrough--}}} |
|super^^script^^|{{{super^^script^^}}} |
|sub~~script~~|{{{sub~~script~~}}} |
|@@highlight@@|{{{@@highlight@@}}} |
|foo -- bar|{{{foo -- bar}}} -- two dashes create an Em dash|
|>| ![[Avoiding Wikification|Suppressing Formatting]] |
|to output text as-is (escaping), enclose it in three double quotes or use the {{{<nowiki>}}} markup|>|
|"""plain//text""" |{{{"""plain//text"""}}}|
|<nowiki>not__wikified</nowiki>|{{{<nowiki>not__wikified</nowiki>}}}|
|>| ![[Headings]] |
|start a new line with one or more question marks to create headings |>|
|<html><h1>Heading 1</h1><h2>Heading 2</h2><h3>Heading 3</h3><h4>Heading 4</h4><h5>Heading 5</h5></html>|{{{!Heading 1}}}<br />{{{!!Heading 2}}}<br />{{{!!!Heading 3}}}<br />{{{!!!!Heading 4}}}<br />{{{!!!!!Heading 5}}}|
|>|![[Lists]]|
|>| [[Ordered Lists|Lists]] |
|<html><ol><li>item one</li><li>item two<ol><li>level two<ol><li>level three</li></ol></li></ol></li></ol></li></ol></html>|{{{#item one}}}<br/>{{{#item  two}}}<br/>{{{##level two}}}<br/>{{{###level three}}}|
|>| [[Unordered Lists|Lists]] |
|<html><ul><li>item one</li><li>item two<ul><li>level two<ul><li>level three</li></ul></li></ul></li></ul></html>|{{{*item one}}}<br/>{{{*item two}}}<br/>{{{**level two}}}<br/>{{{***level three}}}|
|>| [[Definition List|Lists]] |
|<html><dl><dt>term</dt><dd>definition</dd></dl></html>|{{{;term}}}<br />{{{:definition}}}|
|>| [[Mixed Lists|Lists]] |
|<html><ol><li>ordered<ul><li>unordered<dl><dt>term</dt><dd>definition</dd></dl></li></ul></li></ol></html>|{{{# ordered}}}<br />{{{#* unordered}}}<br />{{{#*;term}}}<br />{{{#*:definition}}}|
| ![[Blockquotes]] |>|
| [[Nested Blockquotes|Blockquotes]] |>|
|<html><blockquote>blockquote<blockquote>level two<blockquote>level three</blockquote></blockquote></blockquote></html>|{{{>blockquote}}}<br />{{{>>level two}}}<br />{{{>>>level three}}}|
|>| [[Multi-line Blockquotes|Blockquotes]] |
|<html><blockquote>multi-line<br/>blockquote</blockquote></html>|{{{<<<}}}<br />{{{multi-line}}}<br />{{{blockquote}}}<br />{{{<<<}}}|
|>| [[Mixed Blockquotes|Blockquotes]] |
|<html><blockquote>foo<br><blockquote>inner foo, level 1<br><blockquote>inner foo, level 2<br></blockquote></blockquote>more foo<br></blockquote></html>|{{{<<<}}}<br />{{{foo}}}<br />{{{> inner foo, level 1}}}<br />{{{>> inner foo, level 2}}}<br />{{{more foo}}}<br />{{{<<<}}}|
|>| ![[Code  / Monospaced Text|Code]] |
|>| [[Inline Code|Code]] |
|{{{monospaced text}}}|<html><code>{{{mono space text}}}</code></html>|
|>| [[Code Block|Code]] |
|<html><pre>{{{<br/>multi-line<br/>code block<br/>}}}</pre></html>|<html><code>{{{</code></html><br/>{{{multi-line}}}<br/>{{{code block}}}<br/><html><code>}}}</code></html>|
| ![[Links]] |>|
|>| [[Internal Links|TiddlyLink]] |
|[[WikiWord]]|{{{WikiWord}}}|
|~NoLink|{{{~NoLink}}} -- a tilde {{{~}}} prevents automatic ~WikiWord links|
|[[Plain Link]]|{{{[[Plain Link]]}}}|
|[[Pretty Link|Tiddler Name]]|{{{[[Pretty Link|Tiddler Name]]}}}|
|>| [[External Links|External Link]] |
|A valid URL is automatically rendered as an external link.|>|
|http://www.tiddlywiki.com|{{{http://www.tiddlywiki.com}}}|
|[[Pretty External Link|http://www.tiddlywiki.com]]|{{{[[Pretty External Link|http://www.tiddlywiki.com]]}}}|
|>| ![[Filesystem Links|Links]] |
|You can, of course, use file system links both as plain or pretty links.|>|
|''Windows Network Path''|{{{[[file://///server/share]]}}}|
|''Windows Local''|{{{[[file:///c:/folder/file]]}}}|
|''Linux/Unix Local''|{{{[[file:///folder/file]]}}}|
|''Relative Path (Subfolder)''|{{{[[folder/file]]}}}|
|>| ![[Images]] |
|In general, image files are external to a TiddlyWiki.|>|
|[img[http://www.tiddlywiki.com/favicon.ico]]|{{{[img[path/image.jpg]]}}}|
| aligned right&nbsp;&nbsp;[>img[http://www.tiddlywiki.com/favicon.ico]]|{{{[>img[path/image.jpg]]}}}|
|[<img[http://www.tiddlywiki.com/favicon.ico]]&nbsp;&nbsp;aligned left|{{{[<img[path/image.jpg]]}}}|
|w/ internal link [>img[http://www.tiddlywiki.com/favicon.ico][TiddlyWiki]]|{{{[img[path/image.jpg][TiddlerName]]}}}|
|w/ external link [>img[http://www.tiddlywiki.com/favicon.ico][http://www.tiddlywiki.com]]|{{{[img[path/image.jpg][TiddlyWiki|http://www.tiddlywiki.com]]}}}|
|>| ![[Gradients|gradient]] |
|<<gradient horiz #faa #afa #aaf>>&nbsp;&nbsp;__vert__ical or __horiz__ontal<br>&nbsp;&nbsp;see [[gradient macro|http://tiddlywiki.org/#%5B%5Bgradient%20(macro)%5D%5D]]>>|{{{<<gradient horiz #faa #afa #aaf>>wiki text>>}}}|
|>| ![[Tables]] |
|<<tiddler HTML_TABLE>>|<<tiddler HTML_TABLE_MARKUP>>|
|>|<<tiddler HTML_TABLE_RULES>>|
|>| ![[Custom Styles|CSS Formatting]] |
|>|a {{{@@highlight@@}}} element can accept CSS syntax to directly style text.|>|
|@@color:green;green coloured@@|{{{@@color:green;green coloured@@}}}|
|>| ![[Custom CSS Class Wrapper|CSS Formatting]] |
|>|You can define a custom css class wrapper, like {{{.button}}} below. By default, the inner text is placed inline into a {{{<span>}}} of said class(s). If you start and end the inner text with a newline, the content is placed in a {{{<div>}}}. Use the StyleSheet to define the css styles applied to the class.|
|<br>{{button title{Click!}}}|<html><pre>{{button title{Click!}}}</pre></html>|
|>| ![[Embedded HTML|HTML Formatting]] |
|<html><span style="padding-right:30px;font-size:2em;">any</span><br /><b>valid</b> <em>xhtml</em></html>|<html><code style="font-weight:bold">&lt;html&gt;</code></html>{{{<span style="padding-right:30px;font-size:2em;">any</span><br /><b>valid</b> <em>xhtml</em>}}}<html><code style="font-weight:bold">&lt;/html&gt;</code></html>|
|>| [[Embedded <iframe>|HTML Formatting]] |
|<html><iframe height="200px" width="300px" src="http://www.youtube.com/embed/Cj6ho1-G6tw?vq=hd720" frameborder="0" allowfullscreen/></html>|<html><code style="font-weight:bold">&lt;html&gt;</code></html>{{{<iframe src="http://the.url"/>}}}<html><code style="font-weight:bold">&lt;/html&gt;</code></html>|
|>| ![[Line Break|Line Breaks]] |
|handy for entering multi-line content into table cells or lists|>|
|a<br>b|{{{a<br>b}}} or {{{a<br/>a}}} or {{{a<br />a}}}|
|>| ![[Horizontal Rules]] |
|before<hr>after|{{{<hr>}}} or <br>{{{----}}} on its own line|
|>| ![[HTML Entities]] |
|>|You can use HTML entities...|
|&#632;&trade; |{{{&#632;&trade;}}}|
| ![[Macros]] |>|
|>|macros are called by enclosing the macro name in {{{<<}}} and {{{>>}}}|
|<<version>> |{{{<<version>>}}}|
|>| ![[Hidden Text|Basic Formatting]] |
|This is hidden: |{{{This is hidden: /% secret comment %/}}}|

<$set name="tcc1" value=<<currentTiddler>>> 
<$taglist class="btn btn-primary" template="$:/.bj/templates/TagControlTemplate" emptyMessage="drop here to add tag"></$taglist>
</$set>

Note: This plugin is still in an **EXPERIMENTAL** stage. To install this plugin see InstallMarkDownLike

# Changes to Wikitext

Here the plugin **markdownlike** is being used. It modifies the tiddlywiki syntax to be, well, more like markdown

## Examples
### headings
```
##### hash means heading in markdown - as in wikitext they can be **smaller!**
```
##### hash means heading in markdown - as in wikitext they can be **smaller!**

### Emphasis

```
**Emphasis** now uses stars in place of speech marks
```

**Emphasis** now uses stars in place of speech marks

### Unordered Lists
Although the * can be used to create unordered lists in markdown,  it has been replace in tiddlytext with the + as there was an 'interference' with creating Emphasis.

```
+ in tiddly text only one paragraph per bullet is supported
+ in markdown this is not the case
```
+ in tiddly text only one paragraph per bullet is supported.
+ in markdown this is not the case.

### Ordered Lists
A one level order markdown like list is now possible.

```
1. Only a one level list is supported
2. Lists in markdown are different
```

1. Only a one level list is supported
2. Lists in markdown are different

### Complex Lists

The . replaces # in complex lists

```
. one
.+ first sublevel
.+ same sublevel
. two
```

. one
.+ first sublevel
.+ same sublevel
. two

## Source of content made to be more markdown like
In this content I have made the following changes to the rules

1. using **listmod rule** - now I am using a  . for ordered lists
2. using **headingmod rule** I am using # inplace of ! for headings
3. using **boldmode rule** I am using two * inplace of two '

I have also:

+ d
1. test
1. tset


+ **replaced** * with + for unordered lists

<$link><span class="tw-taglist"><$view field="title"/></span></$link><$fieldmangler><$link to=<<tcc1>> class="tc-btn-invisible">{{$:/core/images/cancel-button}}</$link></$fieldmangler>

<embed type="video/x-flv"  width="400" height="200" src="file:///media/3497f82e-3b95-41de-90af-df905eceeab4/data/spanish/elementary/spanishpod_B0396pr.mp3">

When editor a pdf tiddler to add tags, the contents of pdfs appear as gibberish in the edit window. This can be switch off with this plugin. Once the plugin is installed create a tiddler titled "[[$:/config/EditorTypeMappings/application/pdf]]" with content 'none'  (or drag the one from here) .

This plugin provides object embedding via the CKEditor-oEmbed-Plugin (MIT license),
from http://w8tcha.github.com/CKEditor-oEmbed-Plugin/, which lists the supported sites.
Demo is here OembedDemo

I would not recommend using this at the moment as there are a number of issues that I am seeing

<$oembed url="https://www.youtube.com/watch?v=SX0jvQ0vYVk"  maxWidth=300 maxHeight=500>

<$taglist >

</$taglist>

Code

## Paragraphs, Headers, Blockquotes ##

A paragraph is simply one or more consecutive lines of text, separated
by one or more blank lines. (A blank line is any line that looks like
a blank line -- a line containing nothing but spaces or tabs is
considered blank.) Normal paragraphs should not be indented with
spaces or tabs.

MarkDown offers two styles of headers: *Setext* and *atx*.
Setext-style headers for `<h1>` and `<h2>` are created by
"underlining" with equal signs (`=`) and hyphens (`-`), respectively.
To create an atx-style header, you put 1-6 hash marks (`#`) at the
beginning of the line -- the number of hashes equals the resulting
HTML header level.

Blockquotes are indicated using email-style '`>`' angle brackets.

Markdown:

    A First Level Header
    ====================
    
    A Second Level Header
    ---------------------

    Now is the time for all good men to come to
    the aid of their country. This is just a
    regular paragraph.

    The quick brown fox jumped over the lazy
    dog's back.
    
    ### Header 3

    > This is a blockquote.
    > 
    > This is the second paragraph in the blockquote.
    >
    > ## This is an H2 in a blockquote


Output:

    <h1>A First Level Header</h1>
    
    <h2>A Second Level Header</h2>
    
    <p>Now is the time for all good men to come to
    the aid of their country. This is just a
    regular paragraph.</p>
    
    <p>The quick brown fox jumped over the lazy
    dog's back.</p>
    
    <h3>Header 3</h3>
    
    <blockquote>
        <p>This is a blockquote.</p>
        
        <p>This is the second paragraph in the blockquote.</p>
        
        <h2>This is an H2 in a blockquote</h2>
    </blockquote>

|!Search tag: | <$edit-text tiddler="$:/temp/RenameTags/search" tag="input" type="text"/> |
|!Replace by: | <$edit-text tiddler="$:/temp/RenameTags/replace" tag="input" type="text"/> |

<$button set=<<qualify "$:/state">> setTo="open1">rename</$button>   


<div hidden="true">
<$list filter="[!has[draft.of]tag{$:/temp/RenameTags/search}!tag{$:/temp/RenameTags/replace}sort[created]]">
<$checkbox tag={{$:/temp/RenameTags/replace}}><$click state=<<qualify "$:/state">> text="open1"/> </$checkbox>

<$checkbox tag={{$:/temp/RenameTags/search}}><$click state=<<qualify "$:/state">> text="open1"/> </$checkbox>
</$list>
<$button set="$:/temp/RenameTags/search" setTo=""><$click state=<<qualify "$:/state">> text="open1"/> </$button>   
<$button set="$:/temp/RenameTags/replace" setTo=""><$click state=<<qualify "$:/state">> text="open1"/> </$button> 
</div>

!A Dev Tool
Replaces the tw5 red error  box generated by a uncaught exceptions with a stacktrace showing where the error occurred.  

The uncaught exception can now be passed to the error handling routine:

```
window.onerror(message,file,line,column,errorObj)
```

http://html5.org/tools/web-apps-tracker?from=8085&to=8086

So far I only know that it works with chrome and (at present) not with firefox.

{{$:/plugins/bj/storytabs/readme }}

Try addeding this tiddler to the list using drag and drop - <$link dragoverclic="yes">DragItem</$link> 
<$taglist targeTtag="taglistdemo"></$taglist>

<$linkcatcher  set=loop1 setTo={{!!title}} >
<$reveal state=loop1 text={{!!title}} type="match"><$button class="tw-taglist" set=loop1 setTo="">[x]</$button></$reveal>
<$link><span class="tw-taglist"><$view field="title"/></span></$link></$linkcatcher><$link>@</$link>
<$reveal state=loop1 text={{!!title}} type="match">
<$transclude mode="block">
</$reveal>

<h1>sadAS</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>

\define frame-classes()
tc-tiddler-frame tc-tiddler-edit-frame $(missingTiddlerClass)$ $(shadowTiddlerClass)$ $(systemTiddlerClass)$
\end
<div class=<<frame-classes>>>
<$set name="storyTiddler" value=<<currentTiddler>>>
<$keyboard key="escape" message="tm-cancel-tiddler">
<$keyboard key="ctrl+enter" message="tm-save-tiddler">
<$list filter="[all[shadows+tiddlers]tag[$:/tags/EditTemplate]!has[draft.of]!title[$:/core/ui/EditTemplate/fields]!title[$:/core/ui/EditTemplate/body]] + [title[$:/bj/typestemplate/EditTemplate/body]]" variable="listItem">
<$transclude tiddler=<<listItem>>/>
</$list>
</$keyboard>
</$keyboard>
</$set>
</div>

\define frame-classes()
tc-tiddler-frame tc-tiddler-view-frame $(missingTiddlerClass)$ $(shadowTiddlerClass)$ $(systemTiddlerClass)$ $(tiddlerTagClasses)$
\end
<$set name="storyTiddler" value=<<currentTiddler>>><$set name="tiddlerInfoState" value=<<qualify "$:/state/popup/tiddler-info">>><$tiddler tiddler=<<currentTiddler>>><div class=<<frame-classes>>><$list filter="[all[shadows+tiddlers]tag[$:/tags/ViewTemplate]!has[draft.of]]" variable="listItem"><$transclude tiddler=<<listItem>>/></$list>
</div>
</$tiddler></$set></$set>

\define frame-classes()
tc-tiddler-frame tc-tiddler-view-frame $(missingTiddlerClass)$ $(shadowTiddlerClass)$ $(systemTiddlerClass)$ $(tiddlerTagClasses)$
\end
\define folded-state()
$:/state/folded/$(currentTiddler)$
\end
<$set name="storyTiddler" value=<<currentTiddler>>><$set name="tiddlerInfoState" value=<<qualify "$:/state/popup/tiddler-info">>><$tiddler tiddler=<<currentTiddler>>><div class=<<frame-classes>>><$transclude tiddler="$:/core/ui/ViewTemplate/body"/>
</div>
</$tiddler></$set></$set>

!default
|!Category|!Tip|!Tags|!Rule Tid|!Modes|
|Tid|copy tids||[[defaultTip]]|tiddlers|
|Snip|copy||[[defaultSnip]]||
|Pin|pin it||[[defaultPin]]||

| ''To Format Text As...'' | ''Use This Mark-Up'' |
| ''Bold'' | {{{''Bold''}}} Two single-quotes, not a double-quote. |
| //Italics// | {{{//Italics//}}} |
| ''//Bold Italics//'' | {{{''//Bold Italics//''}}} |
| __Underline__ | {{{__Underline__}}} |
| --Strikethrough-- | {{{--Strikethrough--}}} |
| Super^^script^^ | {{{Super^^script^^}}} |
| Sub~~script~~ | {{{Sub~~script~~}}} |
| @@Highlight@@ |  {{{@@Highlight@@}}} |
| <nowiki>PlainText No ''Formatting''</nowiki> | {{{ <nowiki>PlainText No ''Formatting''</nowiki> }}} |
===+++!*[
Block Elements

`PlainText No ''Formatting''`

!! Headings
|]
!<nowiki>!</nowiki>Heading Level 1
!!<nowiki>!!</nowiki>Heading Level 2
!!!<nowiki>!!!</nowiki>Heading Level 3
!!!!<nowiki>!!!!</nowiki>Heading Level 4
!!!!!<nowiki>!!!!!</nowiki>Heading Level 5
!!!!!!<nowiki>!!!!!!</nowiki>Heading Level 6
===+++!!*[
!! Unordered Lists
|]
!!! Example
* Unordered List, Level 1
** Unordered List, Level 2
*** Unordered List, Level 3

!!!Mark-Up Used
{{{
* Unordered List, Level 1
** Unordered List, Level 2
*** Unordered List, Level 3
}}}
===+++!!*[
!! Ordered Lists
|]
!!! Example
# Ordered List, Level 1A
# Ordered List, Level 1B
## Ordered List, Level 2A
### Ordered List, Level 3A

!!! Mark-Up Used
{{{
# Ordered List, Level 1A
# Ordered List, Level 1B
## Ordered List, Level 2A
### Ordered List, Level 3A
}}}
===+++!!*[
!! Definition Lists
|]
!!! Example
; term
: description

!!! Mark-Up Used
{{{
; term
: description
}}}
===+++!!*[
!! Blockquotes
|]
!!! Example
> blockquote, level 1
>> blockquote, level 2
>>> blockquote, level 3

!!! Mark-Up Used
{{{
> blockquote, level 1
>> blockquote, level 2
>>> blockquote, level 3
}}}

!!! Block Example
<<<
blockquote
<<<

!!! Mark-Up Used
{{{
<<<
blockquote
<<<
}}}
===+++!!*[
!! Preformatted
|]
!!! Example
{{{
preformatted (e.g. code)
}}}

!!! Markup Used
<nowiki>{{{</nowiki>
<nowiki>preformatted (e.g. code)</nowiki>
<nowiki>}}}</nowiki>
===+++!!*[
!! Tables
|]
{{annotation{There is also an in-depth article on [[Tables]].}}}

Columns are delimited by a single pipe character ({{{|}}}); a new line creates a new row.

!!!Example

|CssClass|k
|!heading column 1|!heading column 2|h
|row 1, column 1|row 1, column 2|
|row 2, column 1|row 2, column 2|
|>|COLSPAN|
|ROWSPAN| &hellip; |
|~| &hellip; |
|CssProperty:value;&hellip;| &hellip; |
|caption|c

!!!Markup
{{{
 |CssClass|k
 |!heading column 1|!heading column 2|h
 |row 1, column 1|row 1, column 2|
 |row 2, column 1|row 2, column 2|
 |>|COLSPAN|
 |ROWSPAN| &hellip; |
 |~| &hellip; |
 |CssProperty:value;&hellip;| &hellip; |
 |caption|c
}}}

Notes:
* The {{{>}}} marker creates a "colspan", causing the current cell to merge with the one to the right.
* The {{{~}}} marker creates a "rowspan", causing the current cell to merge with the one above.
===+++!!*[
!! Images
|]
See [[tiddlywiki.com|http://www.tiddlywiki.com/#EmbeddedImages]]
===
===+++!*[
! Links
|]
* [[WikiWord|WikiWords]] are automatically transformed to hyperlinks to the respective tiddler
** the automatic transformation can be suppressed by preceding the respective WikiWord with a tilde ({{{~}}}): {{{~WikiWord}}}
* [[PrettyLinks]] are enclosed in double square brackets and contain the desired tiddler name: {{{[[tiddler name]]}}}
** optionally, a custom title or description can be added, separated by a pipe character ({{{|}}}): {{{[[title|target]]}}} ''N.B.:'' The target can also be any website (i.e. URL), folder or file. 

!! Examples

* a simple website (URL) requires no markup: {{{http://domain.tld}}}
* website (URL) : {{{[[label|http://domain.tld]]}}}
* Unix-style folder: {{{[[label|file:///folder/file]]}}}
* Windows drive-mapped folder {{{[[label|file:///c:/folder/file]]}}}
* Windows network share: {{{[[label|file://///server/folder/file]]}}}
* File in a local subfolder of the TiddlyWiki location: {{{[[label|folder/file]]}}}

! Custom Styling

* inline styles: {{{@@CssProperty:value;CssProperty:value;...@@}}} ''N.B.:''' CSS color definitions should use lowercase letters to prevent the inadvertent creation of WikiWords.
* class wrapper: <nowiki>{{customClass{...}}}</nowiki>

!! Example

{{indent{
lorem ''ipsum'' dolor '''sit''' amet
}}}

(The <code>indent</code> is provided by the TiddlyWiki core in [[StyleSheetLayout]].)
===+++!*[
! Inserting HTML
|]
raw HTML can be inserted by enclosing the respective code in HTML tags ({{{<html>...</html>}}}).

! Avoiding Wikificitation ==

To prevent wiki markup from taking effect for a particular section (e.g. special characters), that section can be enclosed in three double quotes: e.g. {{{"""WikiWord"""}}} (cf. [[Escaping]]).

! Special Markers

* {{{<br>}}} forces a manual line break
* {{{----}}} and {{{<hr>}}} create a horizontal rule
* [[HTML entities|http://www.tiddlywiki.com/#HtmlEntities]]
* {{{>}}} calls the respective [[Macros|macro]]
* To hide text within a tiddler so that it is not displayed, it can be wrapped in {{{/%}}} and {{{%/}}}. This can be a useful trick for hiding drafts or annotating complex markup.
===+++!*[
! See Also
|]
* [[Wiki Markup]]
* [[Multi-Line Contents]]
* [[Tiddler format]] (TiddlyWiki markup version / Cheat Sheet)
* [[Macros]]
* [[Customization]]
===

 <html>pageref="<a class="externalLink" href="http://tiddlywiki.com/" title="External link to http://tiddlywiki.com/" target="_blank">http://tiddlywiki.com/</a>" <br><br>date="Friday, December 20th, 2013 at 2:03:32 pm"<br><h1></h1><span>In the browser, any constituent tiddlers that are <a href="http://tiddlywiki.com#JavaScript" class=" tw-tiddlylink tw-tiddlylink-resolves">JavaScript</a> modules (ie shadow tiddlers of content type <code>application/javascript</code> and possessing the field <code>module-type</code>) are executed during startup processing.
</span></html>

 <html>pageref="<a class="externalLink" href="https://groups.google.com/forum/#%21searchin/tiddlywiki/video$20widget/tiddlywiki/JolT1K-27bk/pywmynIO6OQJ" title="External link to https://groups.google.com/forum/#!searchin/tiddlywiki/video$20widget/tiddlywiki/JolT1K-27bk/pywmynIO6OQJ" target="_blank">https://groups.google.com/forum/#!searchin/tiddlywiki/video$20widget/tiddlywiki/JolT1K-27bk/pywmynIO6OQJ</a>" <br><br>date="Wednesday, December 18th, 2013 at 10:38:16 pm"<br>

I think it would have been TWC, where there is a popular plugin from Eric that selects the template for each displayed tiddler according to tags and other critiera.<div><br></div><div>In TW5 the closes equivalent would be to define a new slice of the ViewTemplate that only displays itself when relevant to the tiddler being displayed. In this way one can augment the default template, rather than totally replacing it. If you wanted to remove any of the default viewtemplate slices you'd just overwrite the relevant shadow tiddlers with a new template that is selective.</div>
<div><br></div><div>To selectively hide things you can use the &lt;$reveal&gt; widget or the &lt;$list&gt; widget with the [limit[1]] trick that came up a few days ago.

 <$set name="loop1" value=<<qualify "$:/temp/taglist">>>
<$taglist class="btn btn-primary">{{!!title||taglisttemplate}}</$taglist>
</$set>

<$include docsheader/>

! Concepts

<<bulletList "Tw5Info">>

file:///media/3497f82e-3b95-41de-90af-df905eceeab4/data/radice/firefoxextension/Tw516/plugins/jermolene.github.com/demo.html#%24%3A%2Fplugins%2Fbj%2FCalendar

There are several methods for upgrading an existing TiddlyWiki version 5 document to a new release. There is a [[different procedure|Upgrading TiddlyWiki on Node.js]] for upgrading [[TiddlyWiki on Node.js]].

<div class="tw-message-box">

<a class="tw-message-icon" href="http://tiddlywiki.com/" target="_blank">{{TiddlyWiki Classic.png}}</a>

!! Upgrading from TiddlyWikiClassic

Remember that TiddlyWiki version 5 is not fully backwards compatible with the older TiddlyWikiClassic. It is recommended that users of TiddlyWikiClassic should not attempt to upgrade their existing files until the new version is more mature.

</div>

! Online upgrading

This process will work on most desktop browsers. Note that none of your personal data leaves your browser with this process.

# Locate your TiddlyWiki file in the file system (ie using Windows Explorer, the Finder on Mac OS X, or your file manager on Linux)
# Visit http://tiddlywiki.com/empty.html in your browser
# Drag your old TiddlyWiki HTML file into the browser window
#* If the file is encrypted you will be prompted for the password
#* Your tiddlers should be imported
# Set a password if you want to use encryption
# Save changes to save the new version

This will download a file called ''empty.html'' to your computer. This file is the upgrade of your old file. You may need to open the location where ''empty.html'' was downloaded, rename ''empty.html'' with the name of the old file you are upgrading, and replace the old file by moving the new file in its place.

//For the moment you'll also need to manually update any plugins that are not included in empty.html://

># Open the control panel to the ''Plugins'' tab in your upgraded wiki
># Check the version numbers of the plugins you are using; any plugins with an older version than the version of [[$:/core]] will probably need updating
># Locate a wiki with the plugins you need to update and open the control panel ''Plugins'' tab
>#* http://tiddlywiki.com/d3demo.html for the D3 plugin
>#* http://tiddlywiki.com/codemirrordemo.html for the CodeMirror plugin
>#* http://tiddlywiki.com/markdowndemo.html for the MarkDown plugin
>#* http://tiddlywiki.com/ for most of the others
># Drag the plugin links one by one back to your own wiki. You should see the version numbers update in the control panel
># Save your wiki

! Offline upgrading

You can also download http://tiddlywiki.com/empty.html locally and perform the same drag-and-drop procedure to upgrade your files.

There are several methods for upgrading an existing TiddlyWiki version 5 document to a new release. There is a [[different procedure|Upgrading TiddlyWiki on Node.js]] for upgrading [[TiddlyWiki on Node.js]].

<div class="tw-message-box">

<a class="tw-message-icon" href="http://tiddlywiki.com/" target="_blank">{{TiddlyWiki Classic.png}}</a>

!! Upgrading from TiddlyWikiClassic

Remember that TiddlyWiki version 5 is not fully backwards compatible with the older TiddlyWikiClassic. It is recommended that users of TiddlyWikiClassic should not attempt to upgrade their existing files until the new version is more mature.

</div>

! Online upgrading

This process will work on most desktop browsers. Note that none of your personal data leaves your browser with this process.

# Locate your TiddlyWiki file in the file system (ie using Windows Explorer, the Finder on Mac OS X, or your file manager on Linux)
# Visit http://tiddlywiki.com/empty.html in your browser
# Drag your old TiddlyWiki HTML file into the browser window
#* If the file is encrypted you will be prompted for the password
#* Your tiddlers should be imported
# Set a password if you want to use encryption
# Save changes to save the new version

This will download a file called ''empty.html'' to your computer. This file is the upgrade of your old file. You may need to open the location where ''empty.html'' was downloaded, rename ''empty.html'' with the name of the old file you are upgrading, and replace the old file by moving the new file in its place.

//For the moment you'll also need to manually update any plugins that are not included in empty.html://

># Open the control panel to the ''Plugins'' tab in your upgraded wiki
># Check the version numbers of the plugins you are using; any plugins with an older version than the version of [[$:/core]] will probably need updating
># Locate a wiki with the plugins you need to update and open the control panel ''Plugins'' tab
>#* http://tiddlywiki.com/d3demo.html for the D3 plugin
>#* http://tiddlywiki.com/codemirrordemo.html for the CodeMirror plugin
>#* http://tiddlywiki.com/markdowndemo.html for the MarkDown plugin
>#* http://tiddlywiki.com/ for most of the others
># Drag the plugin links one by one back to your own wiki. You should see the version numbers update in the control panel
># Save your wiki

! Offline upgrading

You can also download http://tiddlywiki.com/empty.html locally and perform the same drag-and-drop procedure to upgrade your files.

Wikirules define wikitext. The rule for defining 'bold' is here: [[$:/core/modules/parsers/wikiparser/rules/emphasis/bold.js]] .

Wikirules are give a name and a type (mode), from the example above these are

```
exports.name = "bold";
exports.types = {inline: true};
```

Types (parser modes) can be 'inline', ''block' or 'pragma'.

Flexitype uses a tiddler containing lists to say which rules will be used in a particular tiddler type. For example this tiddler is of type 

'text/vnd.twbase;flexibility=MDL'. The tiddler [[MDL]] contain three lists ('inline', ''block' , 'pragma') of rules that define the wikitext; the name of the list defined a parser 'mode'.

The placement of a rule within a particular list enable that rule to be used in that 'parser mode'.  Code implementing user defined rules is of the same form as the built-in rules, with the exception of the 'exports.types', eg in MDL a rule 'strong' is used and it source can be seen here [[$:/bj/mdl/modules/parsers/wikiparser/rules/strong.js]], which is almost the same as the 'bold' rule above. Here is the difference is in the name and type(mode):

```
exports.name = "strong";
exports.types = {user: true};
```
Here the parser mode is 'user' which means it can only be used by being placed in a parser mode list used by the flexitype plugin.

<h2>Demo</h2>
<p>Try the demo here: VisualEditorDemo</p>
<h2>Installation</h2>
<p>This widget uses the ckeditor lib - the 'command' to load it is in the tiddler [[$:/plugin/bj/visualeditor/includelib]] - and it needs to point to a new location, where you will load the library from. To avoid querks with loading the library from the web include the library from your computer (the library can be obtained from http://ckeditor.com/download):</p>
<p>For linux</p>
<p>&lt;script src="file:///yourpath/ckeditor/ckeditor.js"&gt;&lt;/script&gt;</p>
<p>For windows</p>
<p>&lt;script src="file://c/yourpath/ckeditor/ckeditor.js"&gt;&lt;/script&gt;</p>
<p>where 'yourpath' is the path to where you have put the ckeditor download.</p>
<p>Then reload your tiddlywiki.</p>
<p>Also be aware that the editor strips newline characters, this means it cannot&nbsp; be used with some wiki text (it is probably a bad idea to try and mix wiki text with text produced in the visualeditor).</p>
<p>There is a new type for tiddlers using this plugin: text/x-htmlp, select it from the dropdown type menu when you create a new tiddler.</p>
<h2>&nbsp;</h2>
<h2>Configuration Tiddlers</h2>
<p>The tiddler&nbsp;<a class="tc-tiddlylink tc-tiddlylink-shadow" href="http://127.0.0.1:8080/#%24%3A%2Fplugins%2Fbj%2Fvisualeditor%2Fconfig.json">$:/plugins/bj/visualeditor/config.json</a> contains user adjustable values, such as changing how the menu bar appears.</p>
<p>The tiddler&nbsp;<a class="tc-tiddlylink tc-tiddlylink-shadow" href="http://127.0.0.1:8080/#%24%3A%2Fplugins%2Fbj%2Fvisualeditor%2Fstyles.json">$:/plugins/bj/visualeditor/styles.json</a> defines the entries in the 'Styles' drop down menu, which define styles that can be applied to selected text. The tiddler [[alternative/styles.json]] contains some alternative definition that could be cut and pasted in this config tiddler</p>
<p><span class="verbatim">&lt;&lt;version&gt;&gt;</span></p>

<h1><span style="background-color:Red">Visual</span><span style="background-color:Yellow"> Editing</span></h1>
<p>This was created with the visual editor for text/html tiddlers (ckeditor), hit the edit button to give it a try!!</p>
<p><img alt="Screen Shot 2014-05-03 at 10.57.17 AM" class="aligncenter size-medium wp-image-2407" src="http://fluent-forever.com/wp-content/uploads/2014/05/Screen-Shot-2014-05-03-at-10.57.17-AM-300x215.png" style="height:215px; width:300px" /></p>
<p>&nbsp;</p>
<p>&nbsp;</p>

In this release:

*more functionality 
*VisualTW5 can be activated  (experimental only)
*internals updated for tw5 core v5.0.10

Note that at present only English is supported in the dialogues.

<p>VisualTW5 is the application visual editoring to tw5 wkitext. The Idea is to use the visual editor to provide the text markup as html tags, and use only the macro and link functionality from the tw5 wikitext. As tw5 wikitext includes html tags this means that only a subset of tw5 wiki text will be used (in tiddlers created this way). To make a distinction , a new type, text/x-perimental, is used.</p>
<h2>Activation</h2>
<p>After installing the visual editor plugin, drag this tiddler on to your tiddlywiki -[[$:/language/Docs/Types/text/x-perimental]]</p>

<p>- here I have written code to add/define/override parser setting. A base collection of setting are defined using a json tid, eg tiddlywikiRules, which lists the standard rules for vnd.tiddywiki, minus the html rule. An example of this being used is here - [[Upgrading2]], which has the type <strong>text/vnd.tiddlywiki&lt;tiddlywikiRules</strong> ([[tiddlywikiRules]] being a json tiddler . This is then augmented with the 'html' rule, see [[Upgrading]] which has type:<strong>text/vnd.tiddlywiki&lt;fullTW5</strong> see [[fullTW5]].</p>

|!Project|!Location|!Objective|
|[[Flexitype Demos]]|[[$:/plugins/bj/flexitype]] |Exended types - numerous uses|
|[[typestemplate]]|[[$:/plugins/bj/typestemplate]] |enables user templates for types|
|ExtendableCalendar|[[$:/plugins/bj/Calendar]] |A configuarable calendar|
|! <hr> |! <hr> |! <hr> |
|[[drag-and-drop]]|[[$:/plugins/bj/drag-and-drop]] |list by tag that is re-orderable by drag/drop |
|VisualEditor|[[$:/plugins/bj/visualeditor]] |Enable html based content to be created or edited|
|MarKed|[[$:/plugins/bj/plugins/marked]]|alternative markdown (Marked variation) plugin |
|! <hr> |! <hr> |! <hr> |
|JsonEditor|[[$:/plugins/bj/jsoneditor]]|display and edit jsons as trees|
|ClickAction|[[$:/plugins/bj/clickaction]]|allows multiple actions on a lists to be activated at the same time|
|StoryTopTabs|[[$:/plugins/bj/storytabs]]|Display links to open tiddlers across top of story|
|! <hr> |! <hr> |! <hr> |
|[[More Markdown Like]]|$:/plugins/bj/markdownlike|Modified wikitext markup|
|''tiddlyclip''|http://tiddlyclip.tiddlyspot.com|Clip webcontent into tiddlers|
|! <hr> |! <hr> |! <hr> |

in wsest

{{||$:/CommunityExtractedPluginTemplate}}

{{||$:/CommunityExtractedPluginTemplate}}

{{||$:/CommunityExtractedPluginTemplate}}

{{||$:/CommunityExtractedPluginTemplate}}

!Description

<div class="box yellow">

BottomTabs is a set of plugins to enhance the TiddlyWiki experience with the following main features:

* A TabsBar at the bottom of every tiddler where you can see and create related tiddlers like comments, notes, etc.
* [[Meaningful links]] between tiddlers.
* [[Forms]] to create custom new tiddlers.
* Tweaks in the "appearance tab" of the [[ControlPanel|$:/ControlPanel]]

</div>

!Demos

<div class="box red">

A notebook for academic readings: http://wikiphilo.tiddlyspot.com

An notebook for teaching: http://primitivo.tiddlyspot.com

[[William Shakespeare]]

</div>

!Plugins

<div class="box">

!!Basic
*''<$view tiddler="$:/plugins/amp/BT/common" field="description"/>'': //This is the basic plugin, containing the tabsbar and other common tools. It is necesary for the extra plugins to work.//
*:[[$:/plugins/amp/BT/common]] (version {{$:/plugins/amp/BT/common!!version}})

!!Extras

*''<$view tiddler="$:/plugins/amp/BT/reading" field="description"/>'': //Tabs and tools for taking notes about readings. You can easily create tiddlers for authors, books and papers, chapters, quotes, notes and ideas.//
*:[[$:/plugins/amp/BT/reading]] (version {{$:/plugins/amp/BT/reading!!version}})
:

*''<$view tiddler="$:/plugins/amp/BT/teaching" field="description"/>'': //Tabs and tools to manage students, courses, ressources.//
*:[[$:/plugins/amp/BT/teaching]] (version {{$:/plugins/amp/BT/teaching!!version}})

!!Dependencies
:The BottomTabs plugin uses [ext[Font-Awesome icons|http://fortawesome.github.io/Font-Awesome/]] to display its icons and other images. While its not absolutely necesary, it is strongly recommended to install the font-awesome plugin from [ext[TheDiveO|http://thediveo.github.io/TW5FontAwesome/]]:
::[[$:/plugins/TheDiveO/FontAwesome/fonts/FontAwesome]]

</div>

Un livre intéressant à relire.

Around 230 years after Shakespeare's death, doubts began to be expressed about the authorship of the works attributed to him.[189] Proposed alternative candidates include Francis Bacon, Christopher Marlowe, and Edward de Vere, 17th Earl of Oxford.[190] Several “group theories” have also been proposed. Only a small minority of academics believe there is reason to question the traditional attribution, but interest in the subject, particularly the Oxfordian theory of Shakespeare authorship, continues into the 21st century.

//William Shakespeare// was the son of John Shakespeare, an alderman and a successful glover originally from Snitterfield, and Mary Arden, the daughter of an affluent landowning farmer. He was born in ~Stratford-upon-Avon and baptised there on 26 April 1564. His actual date of birth remains unknown, but is traditionally observed on 23 April, Saint George's Day. This date, which can be traced back to an 18th-century scholar's mistake, has proved appealing to biographers, since Shakespeare died 23 April 1616. He was the third child of eight and the eldest surviving son.

Although no attendance records for the period survive, most biographers agree that Shakespeare was probably educated at the King's New School in Stratford, a free school chartered in 1553, about a quarter-mile from his home. Grammar schools varied in quality during the Elizabethan era, but grammar school curricula were largely similar, the basic Latin text was standardised by royal decree, and the school would have provided an intensive education in grammar based upon Latin classical authors.

At the age of 18, Shakespeare married the 26-year-old Anne Hathaway. The consistory court of the Diocese of Worcester issued a marriage licence on 27 November 1582. The next day, two of Hathaway's neighbours posted bonds guaranteeing that no lawful claims impeded the marriage. The ceremony may have been arranged in some haste, since the Worcester chancellor allowed the marriage banns to be read once instead of the usual three times, and six months after the marriage Anne gave birth to a daughter, Susanna, baptised 26 May 1583. Twins, son Hamnet and daughter Judith, followed almost two years later and were baptised 2 February 1585. Hamnet died of unknown causes at the age of 11 and was buried 11 August 1596.

To be, or not to be, that is the question:
Whether 'tis nobler in the mind to suffer
The slings and arrows of outrageous fortune,
Or to take arms against a sea of troubles
And by opposing end them. To die—to sleep,
No more; and by a sleep to say we end
The heart-ache and the thousand natural shocks
That flesh is heir to: 'tis a consummation
Devoutly to be wish'd. To die, to sleep;
To sleep, perchance to dream—ay, there's the rub:
For in that sleep of death what dreams may come,
When we have shuffled off this mortal coil,
Must give us pause—there's the respect
That makes calamity of so long life.
For who would bear the whips and scorns of time,
Th'oppressor's wrong, the proud man's contumely,
The pangs of dispriz'd love, the law's delay,
The insolence of office, and the spurns
That patient merit of th'unworthy takes,
When he himself might his quietus make
With a bare bodkin? Who would fardels bear,
To grunt and sweat under a weary life,
But that the dread of something after death,
The undiscovere'd country, from whose bourn
No traveller returns, puzzles the will,
And makes us rather bear those ills we have
Than fly to others that we know not of?
Thus conscience does make cowards of us all,
And thus the native hue of resolution
Is sicklied o'er with the pale cast of thought,
And enterprises of great pitch and moment
With this regard their currents turn awry
And lose the name of action.

The BottomTabs plugin uses custom fields to create meaningful links between tiddlers:

* `source`
* `about`
* `parent`
* `author`

What's in a name? That which we call a rose
By any other name would smell as sweet.

The Tragedy of Hamlet, Prince of Denmark, often shortened to Hamlet, is a tragedy written by William Shakespeare at an uncertain date between 1599 and 1602. Set in the Kingdom of Denmark, the play dramatizes the revenge Prince Hamlet is instructed to enact on his uncle Claudius. Claudius had murdered his own brother, Hamlet's father King Hamlet and then taken the throne, marrying his deceased brother's widow, Hamlet's mother Gertrude.

Macbeth is Shakespeare's shortest tragedy, and tells the story of a brave Scottish general named Macbeth who receives a prophecy from a trio of witches that one day he will become King of Scotland. Consumed by ambition and spurred to action by his wife, Macbeth murders King Duncan and takes the throne for himself. He is then wracked with guilt and paranoia, and he soon becomes a tyrannical ruler as he is forced to commit more and more murders to protect himself from enmity and suspicion. The bloodbath and consequent civil war swiftly take Macbeth and Lady Macbeth into the realms of arrogance, madness, and death.

Some BT claim that members of Shakespeare's family were Catholics, at a time when Catholic practice was against the law.[194] Shakespeare's mother, Mary Arden, certainly came from a pious Catholic family. The strongest evidence might be a Catholic statement of faith signed by John Shakespeare, found in 1757 in the rafters of his former house in Henley Street. The document is now lost, however, and BT differ as to its authenticity.[195] In 1591 the personities reported that John Shakespeare had missed church “for fear of process for debt”, a common Catholic excuse.[196] In 1606 the name of William's daughter Susanna appears on a list of those who failed to attend Easter communion in Stratford.[196] As several BT have noted, whatever his private views, Shakespeare “conformed to the official state religion”, as Park Honan put it.[197][198] Shakespeare's will uses a Protestant formula and he was a confirmed member of the Church of England, where he got married, his children were baptized, and where he was buried. Other authors argue that there is a lack of evidence about Shakespeare's religious beliefs. BT find evidence both for and against Shakespeare's Catholicism, Protestantism, or lack of belief in his plays, but the truth may be impossible to prove.[199]

Stratford-upon-Avon (/ˌstrætfəd əpɒn ˈeɪvən/, known locally as Stratford) is a market town and civil parish in south Warwickshire, England. It lies on the River Avon, 22 miles (35 km) south east of Birmingham and 8 miles (13 km) south west of Warwick. It is the largest and most populous town of the non-metropolitan district Stratford-on-Avon, which uses the term "on" rather than "upon" to distinguish it from the town itself.[1] Four electoral wards make up the urban town of Stratford; Alveston, Avenue and New Town, Mount Pleasant and Guild and Hathaway. The estimated total population for those wards in 2007 was 25,505.[2]

The town is a popular tourist destination owing to its status as birthplace of the playwright and poet William Shakespeare, often regarded as the world's greatest playwright of all time, receiving about 4.9 million visitors a year from all over the world.[3] The Royal Shakespeare Company resides in Stratford's Royal Shakespeare Theatre, one of Britain's most important cultural venues.

All is in the title

''William Shakespeare'' (/ˈʃeɪkspɪər/;[1] 26 April 1564 (baptised) – 23 April 1616) was an English poet, playwright, and actor, widely regarded as the greatest writer in the English language and the world's pre-eminent dramatist.[2] He is often called England's national poet and the "Bard of Avon". His extant works, including some collaborations, consist of about 38 plays, 154 sonnets, two long narrative poems, and a few other verses, the authorship of some of which is uncertain. His plays have been translated into every major living language and are performed more often than those of any other playwright.

I have an idea concerning William Shakespeare, but I can't tell here.

Shakespeare's works include the 36 plays printed in the First Folio of 1623, listed according to their folio classification as comedies, histories and tragedies. Two plays not included in the First Folio, The Two Noble Kinsmen and Pericles, Prince of Tyre, are now accepted as part of the canon, with BT agreed that Shakespeare made a major contribution to their composition. No Shakespearean poems were included in the First Folio.

In the late 19th century, Edward Dowden classified four of the late comedies as romances, and though many BT prefer to call them tragicomedies, his term is often used. These plays and the associated Two Noble Kinsmen are marked with an asterisk (*) below. In 1896, Frederick S. Boas coined the term “problem plays” to describe four plays: All's Well That Ends Well, Measure for Measure, Troilus and Cressida and Hamlet. “Dramas as singular in theme and temper cannot be strictly called comedies or tragedies”, he wrote. “We may therefore borrow a convenient phrase from the theatre of today and class them together as Shakespeare's problem plays.” The term, much debated and sometimes applied to other plays, remains in use, though Hamlet is definitively classed as a tragedy.

<$macrocall $name="appendButton" now={{Target}} caption="code" add={{$:/snippets/danielo/code}}/>

<$macrocall $name="appendButton" now={{Target}} caption='<$text text="<ol>"></$text>' add={{$:/snippets/danielo/htmlOL}}/>

<$macrocall $name="appendButton" now={{Target}} caption='<$text text="<ul>"></$text>' add={{$:/snippets/danielo/htmlUL}}/>

<$macrocall $name="appendButton" now={{Target}} caption="list" add={{$:/snippets/danielo/list}}/>

<$macrocall $name="appendButton" now={{Target}} caption="ol" add={{$:/snippets/danielo/oList}}/>

<$macrocall $name="appendButton" now={{Target}} caption="ul" add={{$:/snippets/danielo/uList}}/>

$(content)$

{{||$:/CommunityExtractedPluginTemplate}}

{{||$:/CommunityExtractedPluginTemplate}}

{{||$:/CommunityExtractedPluginTemplate}}

{{||$:/CommunityExtractedPluginTemplate}}

{{||$:/CommunityExtractedPluginTemplate}}

{{||$:/CommunityExtractedPluginTemplate}}

!!How this looks like?
An image is better than thousand words. Take a look at this example tiddler: [[Icons based on tags example]]

!!How to install
Just grab this tiddlers into your wiki:

* [[$:/danielo515/customizations/tagsicons]]
* [[$:/danielo515/customizations/tagsicons/styles]]

!!How to add icons
I created a system that makes adding icons very easy:

#  Insert the desired icon in your tiddlywiki as a jpeg,svg,png  or any other image format.
# Tag the tiddler with {{icon||$:/core/ui/TagTemplate}}
# Add a field called `fortag` and put inside it the target tag, for example, {{macros||$:/core/ui/TagTemplate}}. 
# The new icon will apear on all the tiddlers tagged macros.
# You can repeat the above steps as many times as you want.

!!Icon examples
Here you have a couple of icons as example. You can grab them if you want:
<ul>
<$list filter="[tag[icon]]">
<li><$link>{{!!title}}</$link></li>
</$list>
</ul>

<pre><$view field="text"/></pre>

This plugin has been moved to it's own demonstration page:

http://contextplugin.tiddlyspot.com

Check it out there!

Danielo

Type the text for the tiddler 'descTiddler'

Dorothy

\define fieldsFilter() [title[$(fields-source)$]split:table-fields[,]] 

\define rowFilter() [!has[draft.of]tag[$(filter-tag)$]sort[$(sortField)$]]

\define editbutton()
<span title="edit details"><$button set="$:/temp/editPersona" setTo={{!!title}} class="tc-btn-invisible">{{$:/core/images/edit-button}}</$button></span>
\end

\define delbutton()
<span title="delete entry" class="buttons"><$button message="tm-delete-tiddler" param={{!!title}} class="tc-btn-invisible">{{$:/core/images/delete-button}}</$button></span>
\end

\define editModeButtons()
<$reveal state="$:/temp/editPersona" type="match" text={{!!title}} ><<delbutton>> <<okButton>></$reveal> 
\end

\define viewModeButtons()
<$reveal state="$:/temp/editPersona" type="nomatch" text={{!!title}} ><<editbutton>></$reveal> 
\end

\define okButton()
<span title="OK" class="buttons"><$button message="tm-save-tiddler" param={{!!title}} class="tc-btn-invisible" set="$:/temp/editPersona" setTo="" >{{$:/core/images/done-button}}</$button></span>
\end

\define editCell()
<$reveal state="$:/temp/editPersona" type="match" text={{!!title}} > <$edit-text field=<<currentField>>/> </$reveal>
\end

\define viewCell()
<$reveal state="$:/temp/editPersona" type="nomatch" text={{!!title}}><span><$view field=<<currentField>>/></span></$reveal>
\end


\define displayRows()
<$list filter=<<rowFilter>> >
<tr><td><span>{{!!title}}</span></td>
<$list filter=<<fieldsFilter>> variable="currentField"><td><<viewCell>><<editCell>></td></$list><td><<editModeButtons>><<viewModeButtons>> </td></tr></$list>
\end

\define TableHeaders()
<$list filter="[is[current]split:table-headers[,]]" variable="currentField"><th><$button class="tc-btn-invisible" set="sort-field" setTo=<<currentField>> ><<currentField>></$button></th></$list>
\end


\define add-entry-Row()
<tr class="editable"><td><$edit-text tiddler="$:/temp/table" default="" placeholder="Name" tag="input" /></td><$list filter=<<fieldsFilter>> variable="currentField"><td><$edit-text tiddler="$:/temp/table" field=<<currentField>> placeholder=<<currentField>>/></td></$list><td><span> <$newtiddler title={{$:/temp/table}} clear="$:/temp/table" tags={{!!filter-tag}} skeleton="$:/temp/table" edit="no" class="tc-btn-invisible">{{$:/core/images/new-button}}</$newtiddler></span></td></tr>
\end

<$set name="fields-source" value={{!!title}}>
<$set name="filter-tag" value={{!!filter-tag}}>
<$set name="sortField" value={{!!sort-field}}>

@@.reactive-table
<table>
<thead><tr>
<<TableHeaders>><th>Edit</th>
</tr>
</thead>
<tbody>
<<add-entry-Row>>
<<displayRows>>
</tbody>
</table>
@@

</$set>
</$set></$set>

\define appendButton(now, add,caption)
 <$button set="Target" setTo='$now$$add$'>$caption$</$button>
\end

Title: <$edit-text tag="input" tiddler="$:/editor/title"/> <$button set={{$:/editor/title}} setTo={{Target}}> save </$button>


<$list filter="[tag[/editor/buttons]]"> <$transclude/></$list>

<$edit-text  class="editorArea" tiddler="Target"/>
---
{{Target}}

.editorArea{
width:100%;}