Differences
This shows you the differences between two versions of the page.
| Both sides previous revisionPrevious revisionNext revision | Previous revision | ||
| playground [2017/01/31 20:02] – logansam | playground [2022/10/04 11:38] (current) – external edit 127.0.0.1 | ||
|---|---|---|---|
| Line 1: | Line 1: | ||
| + | ====== Playground ====== | ||
| + | | ||
| + | This is a place to test out wiki markup without modifying live pages. Reference for available markup and syntax are available at the [[wiki: | ||
| + | |||
| + | ===== Bootstrap collapse ===== | ||
| + | |||
| + | These are examples of using default bootstrap html css and js collapse. The only modification from the bootstrap documentation is that panel headings can't use <a> tags. | ||
| + | |||
| < | < | ||
| <div class=" | <div class=" | ||
| <div class=" | <div class=" | ||
| <div class=" | <div class=" | ||
| - | <h4 class=" | + | <h4 class=" |
| - | <a role=" | + | |
| Collapsible Group Item #1 | Collapsible Group Item #1 | ||
| - | </a> | ||
| </h4> | </h4> | ||
| </ | </ | ||
| Line 17: | Line 23: | ||
| <div class=" | <div class=" | ||
| <div class=" | <div class=" | ||
| - | <h4 class=" | + | <h4 class=" |
| - | <a class=" | + | |
| Collapsible Group Item #2 | Collapsible Group Item #2 | ||
| - | </a> | ||
| </h4> | </h4> | ||
| </ | </ | ||
| Line 31: | Line 35: | ||
| <div class=" | <div class=" | ||
| <div class=" | <div class=" | ||
| - | <h4 class=" | + | <h4 class=" |
| - | <a class=" | + | |
| - | | + | |
| - | </a> | + | |
| </h4> | </h4> | ||
| </ | </ | ||
| <div id=" | <div id=" | ||
| - | <div class=" | + | <div class=" |
| - | Anim pariatur cliche reprehenderit, | + | Wiki syntax within HTML wrapper. End the **HMTL**, start wiki syntax, then finish your __// |
| - | </ | + | < |
| </ | </ | ||
| </ | </ | ||
| Line 46: | Line 48: | ||
| </ | </ | ||
| + | ---- | ||
| + | < | ||
| + | <button class=" | ||
| + | Button with data-target | ||
| + | </ | ||
| + | <button class=" | ||
| + | Button with data-target 2 | ||
| + | </ | ||
| + | <div class=" | ||
| + | <div class=" | ||
| + | This is a hidden panel | ||
| + | </ | ||
| + | </ | ||
| + | <div class=" | ||
| + | <div class=" | ||
| + | This is a hidden panel 2 with **//wiki syntax//** | ||
| + | < | ||
| + | </ | ||
| + | </ | ||
| + | |||
| + | ===== Outliner Plugin ===== | ||
| + | There is also an outliner plugin that's pretty straight forward as well. | ||
| + | |||
| + | --> Differences between the bootstrap collapse and outliner plugin# | ||
| + | --> Pros# | ||
| + | * You can memorize the syntax easily | ||
| + | * Nested groups are a thing | ||
| + | * The arrow key image makes it clear that it can be clicked on and opened | ||
| + | * also supports wiki syntax inside each of the sections | ||
| + | |||
| + | <-- | ||
| + | --> Cons# | ||
| + | * Not actually grouped together (as seen in some more of the examples below | ||
| + | * cannot be coerced to nicely fit in a bulleted list like this one (bootstrap can be) | ||
| + | * One section does not close when you open a different one | ||
| + | * The tooltip feature is obnoxious | ||
| + | |||
| + | <-- | ||
| + | <-- | ||
| + | |||
| + | Note that all of the notes and randomness are copied and pasted from James Colvin' | ||
| + | |||
| + | --> Section 1 without preview thanks to the pound sign# | ||
| + | |||
| + | * List item one in Section 1 without number | ||
| + | - Item number 1 | ||
| + | - Item number 2 | ||
| + | - Item number 3 | ||
| + | |||
| + | Some other syntax. even **// | ||
| + | |||
| + | --> Nested section opened by default with the carrot sign and a tooltip preview without the pound sign^ | ||
| + | |||
| + | I'm a tooltip and the content! And obnoxious as a tooltip! | ||
| + | |||
| + | --> Nested nested content?# | ||
| + | |||
| + | That would be super awesome if this works\\ horray it does!\\ you'll notice that adding the close out code <-- does nothing if it's not at the start of a new line | ||
| + | |||
| + | <-- close nested nested content comment | ||
| + | outside of nested nested content | ||
| + | |||
| + | <--close nested content in section 1 comment | ||
| + | Continue section 1 outside of nested content? | ||
| + | |||
| + | <-- A COMMENT TO CLOSE OUT SECTION 1 THAT IS INVISIBLE!!!! YESSSSSS!!!!!! | ||
| + | Outside of section 1 before section 2. There' | ||
| + | |||
| + | --> You know you want to try out a section 2!# | ||
| + | Okay, so it's not a real section 2 that auto numbers. I just made the title look like it did that.\\ Otherwise | ||
| + | section 2 is quite beautiful wouldn' | ||
| + | ^ A beautiful table ^^^ | ||
| + | ^Left Header | ||
| + | | content 1 | Content 2 | | ||
| + | | content 1a | ::: | ||
| + | make sure you have some sort of line between a table and the close out ''<'''' | ||
| + | <-- close out section 2 | ||
| + | |||
| + | outside of all of the sections\\ \\ | ||
| + | start up a new sectional outliner thing after using a couple of '' | ||
| + | --> A brand new section 1 that starts out opened, but no preview#^ | ||
| + | some cool internal content to the new section 1 | ||
| + | <-- | ||
| + | \\ | ||
| + | |||
| + | ===== MathJAX plugin ===== | ||
| When $a \ne 0$, there are two solutions to \(ax^2 + bx + c = 0\) and they are | When $a \ne 0$, there are two solutions to \(ax^2 + bx + c = 0\) and they are | ||
| $$x = {-b \pm \sqrt{b^2-4ac} \over 2a}.$$ | $$x = {-b \pm \sqrt{b^2-4ac} \over 2a}.$$ | ||
| + | |||
| + | More math equation options: | ||
| + | |||
| + | To display math on its own line, use double dollar signs: | ||
| + | $$ \frac{d}{dx}\left( \int_{0}^{x} f(u)\, | ||
| + | or escaped square brackets: | ||
| + | |||
| + | \[ \sin A \cos B = \frac{1}{2}\left[ \sin(A-B)+\sin(A+B) \right] \] | ||
| + | A wide range of math environments will work as well: | ||
| + | |||
| + | \begin{align*} | ||
| + | e^x & = 1 + x + \frac{x^2}{2} + \frac{x^3}{6} + \cdots \\ | ||
| + | & = \sum_{n\geq 0} \frac{x^n}{n!} | ||
| + | \end{align*} | ||
| + | |||
| + | Note that the math environments should not be inside the dollar sign delimiters; the environments should stand on their own with just the \begin and \end statements in order to be parsed correctly. See [[https:// | ||
| + | ===== Tip, info, and important things to callout ===== | ||
| + | <WRAP square important 650px> | ||
| + | ===WHOA!=== | ||
| + | STOP RIGHT THERE!\\ YOU SEE THIS BOX?!\\ You can't //help// but read it can you? It's pretty sweet to have this nice box that was specified to be square (rather than round) of a specified length (650px), that is also specified as '' | ||
| + | </ | ||
| + | |||
| + | <WRAP round info 650px> | ||
| + | ===Nice Formal information=== | ||
| + | This round info box provides some additional information that isn't strictly needed in the main body text, but is helpful to have available. | ||
| + | </ | ||
| + | |||
| + | <WRAP round tip 650px> | ||
| + | ===Tip=== | ||
| + | Here's a lovely recommendation that you can follow in case you weren' | ||
| + | </ | ||
| + | ===== Other stuff tbd ===== | ||
| Logic Analyzer | Logic Analyzer | ||
| Line 287: | Line 407: | ||
| See Export in Common Interfaces. | See Export in Common Interfaces. | ||
| + | ===== Pmod table test ===== | ||
| + | |||
| + | |||
| + | |||
| + | ^ [[learn: | ||
| + | | {{topic> | ||
| + | |||
| + | hi | ||
| + | |||
| + | ----- | ||
| + | |||
| + | {{Digilent Product List | ||
| + | | Product Namespace = reference: | ||
| + | | Image = True | ||
| + | | Name = True | ||
| + | | Column = Bus | ||
| + | | Column = Logic Level | ||
| + | | Column = Specification Version | ||
| + | }} | ||