Where communities thrive


  • Join over 1.5M+ people
  • Join over 100K+ communities
  • Free without limits
  • Create your own community
People
Activity
    matrixbot
    @matrixbot
    黒雪姫 Edit: Forgot quotes.

    黒雪姫 ```
    <$wikify name="myExampleDataURI" text="""<<datauri "myExample">>""" >

    <iframe src="myExampleDataURI" sandbox="allow-scripts">
    </$wikify>
    ```

    Used triple quotes, because you used the macro with double quotes, even if single ones would be fine.

    黒雪姫 This is mostly needed because you cannot "double render macro" unless it is used inside WikiText markup. The Wikify widget is filling that gap.
    Devin Weaver
    @sukima
    OMG Thank you! That did it!!!
    You saved me!
    matrixbot
    @matrixbot
    黒雪姫 Yay! Awesome! You are very welcome!! (It really gave me a headache in the past myself!)
    Devin Weaver
    @sukima
    I am so excited for that little tip. I tried so many alternative methods and failed. Was about to write my own javascript widget! You saved me. TW can now finally be my one and truly best tool for tutorials.
    matrixbot
    @matrixbot
    黒雪姫 TiddlyWiki is truly the best tool and especially interactive tutorials! Seeing you speak like that also makes me feel excited! So I am very happy that this works! I wish everything to be breeze now for you! Tutorials are really important! I am so glad that TiddlyWiki makes them much easier to make and contain.
    Devin Weaver
    @sukima
    Agreed
    Lucian Ursu
    @LucianU
    hello. I have situations when I want to enter a multi-line code snippet in a nested element of a bullet list (for example, **). how can I do that?
    matrixbot
    @matrixbot
    黒雪姫 I think it is done exactly how you expect. So by using ** at the start. Make sure there is a new line before starting any WikiText (otherwise it gets interpretted literally due to missing p tag). Also make sure there are no spaces at the front. I don't know if this answers the question because I don't fully understand it. I hope you can find more information in these 2 tiddlers here: https://tiddlywiki.com/#Lists%20in%20WikiText:%5B%5BLists%20in%20WikiText%5D%5D%20Transclusion%20TranscludeWidget
    matrixbot
    @matrixbot

    黒雪姫 Ah, sorry. I re-read the question 10 times more and realized I was wrong. I think you can simply use the CodeBlockWidget <$codeblock> and nest it in a list pretty okay. Example:

    * To do today
    *# Eat
    * To get someone else to do
    *# This
    *# That
    *## <$codeblock code={{$:/editions/tw5.com/macro-examples/say-hi}} />
    *# Do some more

    Link for CodeBlockWidget for more information: https://tiddlywiki.com/#CodeBlockWidget

    Lucian Ursu
    @LucianU
    yes, that does what I want. thank you
    there's only one slight nuisance. I wrote the content of the tiddler I'm including with javascript. that gets displayed as is. I assume there isn't a way around it, is it? because I want syntax highlighting in the tiddler as well
    matrixbot
    @matrixbot
    黒雪姫 This is exactly the code widget for! To give syntax highlighting! Use the language attribute.
    <$codeblock code="SELECT * FROM users WHERE deleted = false" language="sql" />
    so it should be language="javascript" .

    黒雪姫 Make sure you have installed this plugin or else it won't work.

    Highlight.js: syntax highlighting
    $:/plugins/tiddlywiki/highlight

    Lucian Ursu
    @LucianU

    ok, I need to explain better what I mean. I will use your code for the example.

    I have a tiddler called "Get Active Users". the contents of the tiddler are

    SELECT * FROM users WHERE deleted = false

    The above code snippet starts with 3 tildes followed by sql.

    I want to keep it that way, because this gives me syntax highlighting when I look at the tiddler by itself.
    of course, this means that when I include it with <$codeblock code={{Get Active Users}} language="sql", the part with ```sql``` is also included.

    it's not such a big deal. I'm just curious if there's a solution for it.

    matrixbot
    @matrixbot
    黒雪姫 oh I see, you already use the "code widget " because you use the WikiText syntax for it
    黒雪姫 then in that case, all you need to do is to transclude it with block mode
    黒雪姫 Sorry, I will use pictures to make it easier. https://i.imgur.com/k4GYrKE.png This is what I got. This is the code: https://i.imgur.com/JF59MyF.png
    Devin Weaver
    @sukima
    Ahh In cases like these I find it easier to drop the WikiText list and do it manually in good ol' fashioned HTML:
    <ul>
      <li>To do today</li>
      <li>
        <ol>
          <li>Eat</li>
        </ol>
      </li>
      <li>To get someone else to do</li>
      <li>
        <ol>
          <li>This</li>
          <li>That</li>
          <li>
            <ol>
              <li><$transclude tiddler="Test1" mode="inline"/></li>
            </ol>
          </li>
          <li>Do some more</li>
        </ol>
      </li>
    </ul>
    matrixbot
    @matrixbot
    黒雪姫 I didn't have syntah highlight because I was missing the plugin. Installed here: https://i.imgur.com/FeZCmhW.png
    黒雪姫 I also find it easier with HTML, it makes working with widgets more natural.
    Devin Weaver
    @sukima
    Yeah, for complex structure going HTML is easier. And you can excise it to other tiddler for easier inclusion to WikiText elsewhere.
    Lucian Ursu
    @LucianU
    awesome. using $transclude with mode="block" is what I needed. thank you!
    matrixbot
    @matrixbot

    黒雪姫 Also I think you shouldn't include the WikiText for code block inside your code tiddlers, if you want them to have a syntax highlighting in there. It kinda defeats the transclusion capabilities because it "pollutes" the code and you will ideally want the code to be inside a tiddler so that you can re-use it. As it goes with the Philosophy of tiddlers. So if you want highlight, I think the "more TiddlyWiki way" is to build your own custom view template and hide the default body. I made a really quick (and hopefully "simple" enough) to implement for your own needs.

    How it looks like: https://i.imgur.com/mP05F5U.png
    This is how the underlaying code and tiddlers look like: https://i.imgur.com/HxSveUw.png
    Here is a download link to the json file that bundles the same tiddlers, which you can easily import to play with or test at https://tiddlywiki.com/plugins/tiddlywiki/highlight/
    Json Tiddlers Example Bundle (sorryed used a slow site): https://transfer.sh/eaj7y/tiddlers.json

    Disclaimer: I know this can be further improved and made easier to extend by wrapping the code in macros and using list widgets to automatically generate different language tags and their appropriate language code and I would do that, but that would further complicate the matters, so I left this out to make it as easy as possible to understand what's going on. I do highly recommend macros and widgets to be used instead of manual copy/pasting and remembering where the template is and how to edit it. That said, I also included 2 examples so that it is clear how can it be extended, with out without Macros.

    Lucian Ursu
    @LucianU
    can you recommend a resource to familiarize myself with the Philosophy of tiddlers and all these concepts? besides adding tiddlers and referencing them, I haven't used the other tiddlywiki tools
    or is this the best place to start: https://tiddlywiki.com/#Reference?
    Lucian Ursu
    @LucianU
    btw, can you explain what the StyleSheet tiddler does?

    and a question regarding the philosophy. I want to create a tiddler for each piece of syntax from a programming language. for example "Import module".

    but, tiddler names are unique and I want to do this for several programming languages.

    does it make sense to put the language name in the tiddler name "Haskell: Import module" or should I use a different approach?

    Devin Weaver
    @sukima
    I do this a lot. If the tiddler I am transcluding is really one type I will mark it as such and TW does the right thing. But if the tiddler has more information (like some pre and post content) I will make it a standard tiddler with named code blocks I think it kinda depends on use case. Here is some examples
    matrixbot
    @matrixbot

    黒雪姫 The Philosophy of Tiddlers is just this: https://tiddlywiki.com/#Philosophy%20of%20Tiddlers
    After all, there aren't really more "philosophies" and everything is in your control to your needs and decisions. Basically, what I said is just one of many other possible ways that you may like more. If your information isn't to be re-used, using the Code Blocks in WikiText is just fine. In my opinion the most work you'll have to do in TiddlyWiki is to design it to your needs and what you would like to do. After all, you can always excise text into tiddlers.

    Also yes, it does make sense if you put the language in the tiddler name "Haskell:" after all, they must be unique. You can even select these by using "[prefix[Haskell:]]" filter and maybe not even use a tag. The possibilities are endless pretty much. However, you have to think which way is easiest for you and you like it the most.

    The StyleSheet tiddler is a tiddler with a random name that I gave it. The important thing in it is the special tag that it has $:/tags/Stylesheet this is treated by TiddlyWiki to inject the content of that tiddler in the CSS space (even if that tiddler is not currently rendered).

    Basically it allows me to add CSS globally. Thanks to that $:/tags/Stylesheet tag.

    matrixbot
    @matrixbot

    黒雪姫 I found a mistake in my "StyleSheet" tiddler. Basically the "<style>" tag isn't needed if it has the stylesheet tag. Here I fixed this and added "support" how it would look like if you used "Haskell:"

    Fixed stylesheet tiddler + added support for "Haskell: " https://i.imgur.com/DVFDE4D.png
    This is how it looks: https://i.imgur.com/EXFY8dW.png

    You can see that in the Haskell example, I didn't even use tags. So really, this is just to adopt your own set of conventions based from what TiddlyWiki provides. Customize and design things so that you like them! That's it. There isn't really the "best way", only the way you want. Just be aware of the other possibilities, that's all.

    matrixbot
    @matrixbot

    黒雪姫 Brief description of the StyleSheet tiddler. Just in case. Basically it is CSS code. It uses basic CSS to target specific html elements from TiddlyWiki to apply my own style to them. For example what I wanted to do with that is to hide the main body. That's what the Stylesheet does. It hides the default text body that gets rendered. This is because I use a view template to show it rendered through the code widget. So I need this to hide the default text or else it will appear twice.

    Other than knowing how the html structure is and writing the CSS rule there isn't anything interesting. I know that tiddlers have a data-tags attribute and I know that CSS has attribute selector plus this is also explained here: https://tiddlywiki.com/#How%20to%20apply%20custom%20styles

    Probably the more interesting is the one that I just added. It uses TiddlyWiki list widget, which is really powerful to dynamically generate CSS code. Basically it takes all Haskell: tiddlers and has them already with rules. I typically use escapecss so I need an inline filter because I wanted to add escapecss[] to help with weird titles. So I use the "safe for CSS" title of a tiddler and another attribute that I know that tidders have in their HTML structure and CSS attribute selector to add the style I want, which is to hide the body text.

    黒雪姫 Mistake I did: if you have a tiddler that's tagged with $:/tags/Stylesheet you don't need to use <style> html tag
    黒雪姫 Plus it also allows you to use WikiText power to generate CSS rules
    黒雪姫 Bonus: If I wanted to add more programming languages I have to only edit filter="[prefix[Haskell: ]]" to filter="[prefix[Haskell: ]] [prefix[Javascript: ]]" This makes 2 independed filters combined together.
    黒雪姫 However, I also have to add Javascript into the View Template
    matrixbot
    @matrixbot
    黒雪姫 Ultimately, TiddlyWiki is all about making it yours to comply to your notes.
    黒雪姫 There are more ways than one.
    黒雪姫 tl;dr version: If you don't plan to reuse code fragments. Feel free to use WikiText for code blocks. If you do plan on reusing code fragments and that also depends where (if linebreaks are allowed or not) you may have to decide if you are okay with having the WikiText for code block part of the code tiddler or not. Again depends on the usage and needs
    Lucian Ursu
    @LucianU
    thank you for the thorough explanation. I understand what you mean.
    now I feel that I need to familiarize myself with the tiddlywiki building blocks. to understand what filters and macros and system tags and others offer me.
    and a good start seems the list under Concepts
    I like this quote, btw
    "TiddlyWiki aspires to provide an algebra for tiddlers, a concise way of expressing and exploring the relationships between items of information. "
    matrixbot
    @matrixbot

    黒雪姫 Exactly! I like this quote too. Sadly, I can recommend you to learn things incrementially. In fact, even I learn more and more things just from stumbling across them on the site. Reminds me of those times when you look up for something in the vim help and you discover some other feature. I guess TiddlyWiki can really be compared as the "emacs" of "note-taking apps" (TiddlyWiki is something much more than that!)

    As far as learning goes. Filters create lists of tiddlers, so play with them at the $:/AdvancedSearch Filter tab or inside $list widget. I think you should first learn $list widget because it is really powerful and macros are nothing but to substitute text (alternative to copy/pasting but with basic parameters) macros aren't anything fancy. Widgets and how to use them is the main power of TiddlyWiki and to chain widgets with HTML tags to get what you want. Also to know how transclusion works. I think these are one of the first things and there is still a lot to them. I also think that the non-linear nature of tiddlywiki helps a little, because there is just a lot to learn. So tackle a little and slowly over time.

    My best advice to learning more is just viewing examples and other TiddlyWikis and dissect them to see how other people accomplished something and then read the documentation about it on tiddlywiki.com

    The TiddlyWiki toolchain on dynalist has a lot of plugins and example wikis which may be of help too!

    matrixbot
    @matrixbot

    黒雪姫 I believe that with all that power and flexibility, it is really important to think of a main structure of your notes and go on from there. I think this is hinted at this Tiddler over here: https://tiddlywiki.com/#Adopt%20a%20Titles%20Policy

    One of my initial problems that I had when I was a beginner (coming from note-taking applications) is the fact that there were no folders or something to navigate to. This helped me to realize that I actually don't need that and in reality I need a stable structure instead and policy how to give titles. I can get lost notes by using the search and the rest from my structure. Now that I have familiarity with TiddlyWiki I even bring this further by creating home tiddlers which have custom search fields that are like master repositories of my structure simply because I like it that way and no other reason!

    Devin Weaver
    @sukima
    I tag notes and then I can make easy lists in tiddlers. I will often have one Intro tiddler with manual links and <<list-links "…">>.
    The filter syntax is really huge and flexible
    The search feature relieves the anxiety of loosing something so I focus on capturing then organizing and then organize if I need to later.
    It is very GTD-ish
    matrixbot
    @matrixbot

    黒雪姫 I also start with manual links and if I can <<list-links "...">> macro. In fact that one is probably my favorite macro because it is so easy to get a quick list, the second one would probably be the tabs <<tabs "[[My Filter]] [[or simple title list]]">>macro which have different basic tiddlers with lists in them. Capturing then organizing is very good to do! I think TiddlyWiki encourages that anyway, you are supposed to read and work with your tiddlers and edit later if needed. Capture first and organize later is something that I do, because at least for me to get it written down is most important. A personal notebook can be messy, what matters is to find it when you need it. Which isn't so hard, especially with Search.

    Maybe learning more about filters first and start by using them in some simple built in macros like <<list-links "...">> and combine them with <<tabs "...">> could help you really feel the power of TiddlyWiki. I personality think that filter syntax is so flexible, but once you know how to use it. It can bring connections between your tiddlers and more dynamic things.