TiddlyWiki uses Wiki style markup, a way of lightly "tagging" plain text so it can be transformed into HTML. Edit this Tiddler to see samples.\n\n! Header Samples\n!Header 1\n!!Header 2\n!!!Header 3\n!!!!Header 4\n!!!!!Header 5\n\n! Unordered Lists:\n* Lists are where it's at\n* Just use an asterisk and you're set\n** To nest lists just add more asterisks...\n***...like this\n* The circle makes a great bullet because once you've printed a list you can mark off completed items\n* You can also nest mixed list types\n## Like this\n\n! Ordered Lists\n# Ordered lists are pretty neat too\n# If you're handy with HTML and CSS you could customize the [[numbering scheme|http://www.w3schools.com/css/pr_list-style-type.asp]]\n## To nest, just add more octothorpes (pound signs)...\n### Like this\n* You can also\n** Mix list types\n*** like this\n# Pretty neat don't you think?\n\n! Tiddler links\nTo create a Tiddler link, just use mixed-case WikiWord, or use [[brackets]] for NonWikiWordLinks. This is how the GTD style [[@Action]] lists are created. \n\nNote that existing Tiddlers are in bold and empty Tiddlers are in italics. See CreatingTiddlers for details.\n\n! External Links\nYou can link to [[external sites|http://google.com]] with brackets. You can also LinkToFolders on your machine or network shares.\n\n! Images\nEdit this tiddler to see how it's done.\n[img[http://img110.echo.cx/img110/139/gorilla8nw.jpg]]\n\n!Tables\n|!th1111111111|!th2222222222|\n|>| colspan |\n| rowspan |left|\n|~| right|\n|colored| center |\n|caption|c\n\nFor a complex table example, see PeriodicTable.\n\n! Horizontal Rules\nYou can divide a tiddler into\n----\nsections by typing four dashes on a line by themselves.\n\n! Blockquotes\n<<<\nThis is how you do an extended, wrapped blockquote so you don't have to put angle quotes on every line.\n<<<\n>level 1\n>level 1\n>>level 2\n>>level 2\n>>>level 3\n>>>level 3\n>>level 2\n>level 1\n\n! Other Formatting\n''Bold''\n==Strike==\n__Underline__\n//Italic//\nSuperscript: 2^^3^^=8\nSubscript: a~~ij~~ = -a~~ji~~\n@@highlight@@ Unfortunately highlighting is broken right now.\n@@color(green):green colored@@\n@@bgcolor(#ff0000):color(#ffffff):red colored@@ Hex colors are also broken right now.\n
Javascript "plugins" for the TiddlyWiki instance.
\n// this function lifted mostly from Josh's incomingTags macro at serversidewiki.com\n// makes a wiki text list of all tagged tiddlers\nfunction getTaggedTiddlersText(title, sortby) {\n if (!sortby) {\n // sortby="modified";\n sortby="title"; \n }\n var tags = store.getTaggedTiddlers(title,sortby);\n str=""; \n for (i=0; i<tags.length; i++) {\n str+="* [[" + tags[i].title + "]]\sn";\n // TODO. make a comma separated version too\n // have an option to select between them\n }\n return str;\n}\n\n// use this to (re)build the tagged list for a tiddler\nfunction refreshTaggedList(title) {\n\n var theViewer = document.getElementById("viewer"+title);\n\n if (theViewer) {\n\n var theTaggedList = document.getElementById("tagged"+title);\n if (theTaggedList) {\n theViewer.removeChild(theTaggedList);\n }\n\n var taggedText = getTaggedTiddlersText(title,"title");\n\n if (taggedText != "") {\n var newTaggedList = createTiddlyElement(theViewer,"div","tagged" + title,"tagged",null); \n wikify(getTaggedTiddlersText(title),newTaggedList); \n }\n }\n}\n\n// I want to refresh the tagged list in other visible tiddlers\n// this is to refresh if we remove a tiddler\nwindow.deleteTiddler_orig_mptw_tagglytagging = window.deleteTiddler;\nwindow.deleteTiddler = function(title) {\n var oldtags = [];\n var tiddler = store.tiddlers[title];\n if (tiddler) {\n var oldtags = tiddler.tags;\n }\n\n deleteTiddler_orig_mptw_tagglytagging(title);\n\n for (i=0; i<oldtags.length; i++) {\n refreshTaggedList(oldtags[i]);\n }\n}\n\n// this is if we edit a tiddler\n// refresh tags on screen\nwindow.saveTiddler_orig_mptw_tagglytagging = window.saveTiddler;\nwindow.saveTiddler = function(title) {\n\n var newTitle = document.getElementById("editorTitle"+title).value;\n\n var oldtags = [];\n var tiddler = store.tiddlers[title];\n if (tiddler) {\n var oldtags = tiddler.tags;\n }\n \n saveTiddler_orig_mptw_tagglytagging(title);\n\n var newtags = store.tiddlers[newTitle].tags;\n\n for (i=0; i<newtags.length; i++) {\n refreshTaggedList(newtags[i]);\n }\n\n // will do lots twice. should do a unique on oldtags and newtags\n // probably its fast enough that we don't care\n\n for (i=0; i<oldtags.length; i++) {\n refreshTaggedList(oldtags[i]);\n }\n\n}\n\n//==========================================================\n\nwindow.createTiddlerViewer_orig_mptw_tagging = window.createTiddlerViewer;\nwindow.createTiddlerViewer = function(title,highlightText,highlightCaseSensitive) {\n createTiddlerViewer_orig_mptw_tagging(title,highlightText,highlightCaseSensitive);\n refreshTaggedList(title);\n}\n\n\n//==========================================================\n// only change in this is to put the footer above the title... \n// I know that's a bit strange but it's the easiest way to move the tag buttons\n\nwindow.createTiddlerSkeleton_orig_mptw_tagging = window.createTiddlerSkeleton;\nwindow.createTiddlerSkeleton = function(place,before,title)\n{\n var theTiddler = createTiddlerSkeleton_orig_mptw_tagging(place,before,title);\n theFooter = document.getElementById("footer"+title);\n theTitle = document.getElementById("title"+title);\n // want to put the footer up above the title\n theTiddler.childNodes[0].insertBefore(theFooter,theTitle);\n return(theTiddler);\n}\n\n\n//==========================================================\n// I want a TiddlyLink in place of a TagButton\n\nwindow.createTagButton = function(place,tag,excludeTiddler) {\n return createTiddlyLink(place,tag,tag);\n}\n\n//==========================================================\n// this is to make the Tags tab work the same. TiddlyLink instead of Tag button\n// TODO: currently we lose the Tag count display\n\nconfig.macros.allTags.handler = function(place,macroName,params) {\n var tags = store.getTags();\n if(tags.length == 0) {\n createTiddlyElement(place,"div",null,null,this.noTags);\n }\n for (t=0; t<tags.length; t++) {\n var theTag = createTiddlyLink(place,tags[t][0],tags[t][0] + " (" + tags[t][1] + ")");\n theTag.setAttribute("tag",tags[t][0]);\n place.appendChild(document.createElement("br"));\n }\n}\n\nconfig.views.wikified.tag.labelNoTags = "";\nconfig.views.wikified.tag.labelTags = "";\n\nsetStylesheet(\n "div.tagged {background:#f8f8f8;margin-top:0.5em;border: solid #f0f0f0 3px;}\sn"+\n "div.tagged ul {padding-top:0px;margin-top:4px;margin-bottom:8px;list-style-type:square;}\sn"+\n "div.footer a.tiddlyLink { padding-top:0px;margin-right:1.2em;}\sn"+\n "div.footer {margin-top:0px;padding-top:0px;}\sn"+\n "",'tagglyTaggingStyles');\n\n\n
\nwindow.createTiddlerEditor_orig_mptw_focustweak = window.createTiddlerEditor;\nwindow.createTiddlerEditor = function(title)\n{\n // open the window\n createTiddlerEditor_orig_mptw_focustweak(title);\n\n // get the input boxes\n var theTitleBox = document.getElementById("editorTitle" + title);\n var theBodyBox = document.getElementById("editorBody" + title);\n\n // tweak the focus\n if (title == 'New Tiddler') {\n theTitleBox.focus();\n theTitleBox.select();\n }\n else if (theBodyBox.value == config.views.editor.defaultText.format([title]) ||\n theBodyBox.value == config.views.editor.defaultText.format(["New Tiddler"])) {\n theBodyBox.focus();\n theBodyBox.select();\n }\n else {\n theBodyBox.focus();\n }\n}\n
\nwindow.onClickToolbarCloseOthers = function(e) {\n if (!e) var e = window.event;\n clearMessage();\n if(this.parentNode.id)\n closeAllOtherTiddlers(this.parentNode.id.substr(7));\n e.cancelBubble = true;\n if (e.stopPropagation) e.stopPropagation();\n return(false);\n}\n\nfunction closeAllOtherTiddlers(thisTitle) {\n clearMessage();\n var place = document.getElementById("tiddlerDisplay");\n var tiddler = place.firstChild;\n var nextTiddler;\n while(tiddler) {\n nextTiddler = tiddler.nextSibling;\n if(tiddler.id) {\n if(tiddler.id.substr(0,7) == "tiddler") {\n var title = tiddler.id.substr(7);\n if(!document.getElementById("editor" + title) && title != thisTitle) {\n place.removeChild(tiddler);\n }\n }\n }\n tiddler = nextTiddler;\n }\n window.scrollTo(0,0);\n}\n\nconfig.views.wikified.toolbarCloseOthers = {text: "close others", tooltip: "Close all tiddlers other than this one"};\n\nwindow.createTiddlerToolbar_orig_mptw_closeothers = window.createTiddlerToolbar;\nwindow.createTiddlerToolbar = function(title,isEditor) {\n createTiddlerToolbar_orig_mptw_closeothers(title,isEditor);\n var theToolbar = document.getElementById("toolbar" + title);\n var lingo = config.views.wikified;\n if(!isEditor) {\n createTiddlyButton(theToolbar, lingo.toolbarCloseOthers.text, lingo.toolbarCloseOthers.tooltip, onClickToolbarCloseOthers);\n insertSpacer(theToolbar);\n \n // this gets a little hacky\n // want to put my new button next to close button\n closeOthersButton = theToolbar.childNodes[9];\n spacer = theToolbar.childNodes[10];\n secondButton = theToolbar.childNodes[3];\n\n\n theToolbar.insertBefore(spacer,secondButton);\n theToolbar.insertBefore(closeOthersButton,spacer);\n\n }\n}
Yeah, you wish I had a subtitle..
config.macros.newJournal.handler = function(place,macroName,params)\n{\n var now = new Date();\n var title = now.formatString(params[0].trim());\n var createJournal = function() {\n displayTiddler(null,title,2,null,null,false,false);\n var tagsBox = document.getElementById("editorTags" + title);\n if(tagsBox && params[1])\n tagsBox.value = String.encodeTiddlyLink(params[1]) + " " +tagsBox.value;\n };\n var label = this.label;\n if(params[2])\n label = params[2];\n createTiddlyButton(place,label,this.prompt,createJournal);\n}
\nwindow.onClickToolbarNewHere = function(e) {\n if (!e) var e = window.event;\n clearMessage();\n if(this.parentNode.id) {\n displayTiddler(this.parentNode,"New Tiddler",2,null,null,false,false);\n tagBox = document.getElementById("editorTagsNew Tiddler"); \n tagBox.value = "[["+this.parentNode.id.substring(7)+"]]";\n }\n e.cancelBubble = true;\n if (e.stopPropagation) e.stopPropagation();\n return(false);\n}\n\nconfig.views.wikified.toolbarNewHere = {text: "new here", tooltip: "Create a new tiddler with tagged as this tiddler"};\n\nwindow.createTiddlerToolbar_orig_mptw_newhere = window.createTiddlerToolbar;\nwindow.createTiddlerToolbar = function(title,isEditor) {\n createTiddlerToolbar_orig_mptw_newhere(title,isEditor);\n var theToolbar = document.getElementById("toolbar" + title);\n var lingo = config.views.wikified;\n if(!isEditor) {\n createTiddlyButton(theToolbar, lingo.toolbarNewHere.text, lingo.toolbarNewHere.tooltip, onClickToolbarNewHere);\n insertSpacer(theToolbar);\n }\n}\n
BP's BayCHI TiddlyWiki
<<search>><<closeAll>><<permaview>><<newTiddler>><<newJournal 'Journal MM-DD-YYYY' journal>><<saveChanges>><<slider chkSliderOptionsPanel OptionsPanel options 'Change TiddlyWiki advanced options'>>
div#mainmenu hr {margin:0px;padding:0px;padding-top:10px;\n border-style:none;\n border-width:1px;\n border-color:#ccc;\n border-bottom-style:solid;\n}\n.viewer pre { font-size:105%; }\n/* colour scheme begin */ \ndiv#titleLine { padding-top:30px; background:#369;}\ndiv#sidebarOptions { background:#696; }\ndiv#sidebarOptions a.button { color:#eef;}\ndiv#sidebarOptions a.button:hover { color:#fff; background:#252;}\ndiv#mainmenu .tiddlyLink { font-weight:bold;color:#369; }\ndiv#mainmenu .tiddlyLink:hover { background:#369;color:white; }\ndiv#mainmenu .button { font-weight:bold; color:#363; }\ndiv#mainmenu .button:hover { background:#363;color:white; }\ndiv.viewer a.tiddlyLink { color:#369; }\ndiv.viewer a.tiddlyLink:hover { background:#acd; }\ndiv.footer a.tiddlyLink { color:#369; }\ndiv.footer a.tiddlyLink:hover { background:#acd; }\n.editorFooter a.button, .tiddler .button { color: #369; background:#eee; }\n.editorFooter a.button:hover, .tiddler .button:hover { color: #fff; background: #369; }\n.editorFooter a.button:active, .tiddler .button:active { color: #fff; background: #369; }\n.editorFooter a:link { color: #369; } \n#popup {color:#eee; background:#369;}\n#popup a {color:#fff; background:#369; }\n#popup a:hover {color:black; background:#eee;}\ndiv.tabset {background:#696;}\na.tab {background:#369;}\n#mainMenu .externalLink { color:#252; }\n#mainMenu .externalLink:hover { color:white;background:#696; }\n.tiddler .externalLink { color:#252; }\n.tiddler .externalLink:visited { color:#252; }\n.tiddler .externalLink:hover { color:#252;background:#ada; }\n.viewer a:link { color: #252; } \n.viewer a:visited { color: #252; } \n.viewer a:hover { color:#252; background:#ada; }\n#titleLine a {color:white;}\na.tabSelected {background:#369;font-weight:bold;}\n#sidebarTabs {color: white;background-color: #69b;}\n#sidebarTabs .tabSelected {color: white;background-color: #369;}\n#sidebarTabs .tabUnselected {color: white;background-color: #369;}\n#sidebarTabs .tabContents {background-color: #69c;}\n#sidebarTabs .t