Line 11: |
Line 11: |
| | | |
| ==Images== | | ==Images== |
− | [[File:placeholder.png|thumb|300px|Right-floating image thumbnail with description.]] | + | [[File:placeholder.png|thumb|320px|Right-floating image thumbnail with description.]] |
| | | |
| To optimize screen space, images should be placed in a floating window, aligned to the right side of the screen. Larger images can be automatically resized to thumbnails, by specifying the thumbnail width. 300px is the preferred thumbnail size. Adding a description underneath the image is appreciated. | | To optimize screen space, images should be placed in a floating window, aligned to the right side of the screen. Larger images can be automatically resized to thumbnails, by specifying the thumbnail width. 300px is the preferred thumbnail size. Adding a description underneath the image is appreciated. |
Line 18: |
Line 18: |
| '''Inline Images''' | | '''Inline Images''' |
| | | |
− | Images that are used, for instance, as part of a step-by-step tutorial can be placed inline, with larger size to make them more readable. | + | Images that are used, for instance, as part of a step-by-step tutorial can be placed inline, with larger size to make them more readable. The exact size is up to you, but the width should not exceed 720px.<ref>Thumbnails 720px wide still fit comfortably within a browser window on half a 1920px desktop monitor.</ref> |
− | [[File:placeholder.png|frame|left|300px|Inline Image]]<br clear=all> | + | [[File:placeholder.png|thumb|none|480px|Caption]] |
| | | |
| You can prevent text that is placed after the image from flowing next to the image by placing an HTML break behind it. | | You can prevent text that is placed after the image from flowing next to the image by placing an HTML break behind it. |
Line 55: |
Line 55: |
| | | |
| <code>Fixed format text for short, single-line code.</code> | | <code>Fixed format text for short, single-line code.</code> |
| + | |
| + | <syntaxhighlight lang="text"> |
| + | Long code, spans entire width of the page. |
| + | Supports syntax highlighting of certain languages, like Python and HTML. |
| + | Change the lang="" attribute to the correct language, e.g. lang="python" or lang="html5" |
| + | Use lang="text" for non-supported languages. |
| + | </syntaxhighlight> |
| + | |
| + | <br/> |
| | | |
| <syntaxhighlight lang="text" line style="height:15em; overflow:auto;"> | | <syntaxhighlight lang="text" line style="height:15em; overflow:auto;"> |
− | Long code, spans entire width of the page
| + | You can also add line numbering. |
| | | |
| If your code is longer than, say, 50 lines, you can add a style attribute to introduce a scrollbar, as sampled here. For a 50-line cutoff, use style="height:50em; overflow:auto;". | | If your code is longer than, say, 50 lines, you can add a style attribute to introduce a scrollbar, as sampled here. For a 50-line cutoff, use style="height:50em; overflow:auto;". |
Line 63: |
Line 72: |
| I might fix that, but if it's really crucial to have an entire page full of code, you should probably give it a separate page. | | I might fix that, but if it's really crucial to have an entire page full of code, you should probably give it a separate page. |
| | | |
− | <!-- start slipsum code --> | + | <!-- Commence Bacon Ipsum --> |
| + | Bacon ipsum dolor amet eiusmod in ribeye, flank duis swine drumstick shank kielbasa lorem pariatur shoulder in. Flank capicola dolore, tri-tip boudin fatback turkey. |
| + | Ut esse in voluptate porchetta duis reprehenderit irure ullamco mollit tri-tip bresaola. Anim beef bresaola meatball t-bone spare ribs consequat ullamco. |
| + | Shoulder sirloin fatback veniam dolore. Adipisicing sed tempor shank lorem, pariatur tri-tip et pork loin tail chuck meatloaf. |
| | | |
− | Normally, both your asses would be dead as fucking fried chicken,
| + | Exercitation beef ribs short loin veniam pig, incididunt spare ribs. In ipsum biltong ex enim, boudin chuck andouille velit duis cow prosciutto elit. |
− | but you happen to pull this shit while I'm in a transitional period so I don't wanna kill you, I wanna help you.
| + | Duis tongue laborum veniam do meatloaf porchetta boudin minim aute in meatball ex turkey occaecat. Dolor kevin officia shoulder corned beef. |
− | But I can't give you this case, it don't belong to me.
| |
− | Besides, I've already been through too much shit this morning over this case to hand it over to your dumb ass.
| |
| | | |
− | You think water moves fast? You should see ice.
| + | Pork irure non, et nulla qui prosciutto boudin. Pancetta in turducken magna doner do dolor anim ad meatball prosciutto. Officia excepteur drumstick kielbasa ullamco, |
− | It moves like it has a mind. Like it knows it killed the world once and got a taste for murder.
| + | velit qui capicola aliquip. Cillum commodo nulla elit drumstick kevin turducken ut consectetur. Frankfurter in in boudin jerky. Do in anim ut sunt voluptate bresaola sed. |
− | After the avalanche, it took us a week to climb out.
| + | Est leberkas nulla, incididunt biltong bacon boudin rump dolore dolore kielbasa proident kevin aliqua. |
− | Now, I don't know exactly when we turned on each other, but I know that seven of us survived the slide... and only five made it out.
| + | </syntaxhighlight> |
− | Now we took an oath, that I'm breaking now.
| |
− | We said we'd say it was the snow that killed the other two, but it wasn't.
| |
− | Nature is lethal but it doesn't hold a candle to man.
| |
| | | |
− | http://slipsum.com
| + | For command-line code, you can also style it like this for clarity: |
| + | <code style="background-color:#000; color:#fff; padding:1px 3px;">ping 127.0.0.1 -n 50 -l 1024</code> |
| | | |
− | </syntaxhighlight>
| + | You could also use the <nowiki><tt> <pre> and nowiki </nowiki> tags if better suited for your needs, whatever works best to present the code as clear and readable as possible. |
− | | |
− | You could also use the <nowiki><tt> and nowiki </nowiki> tags if better suited for your needs. | |
| | | |
| ==Downloads== | | ==Downloads== |
− | Download links are presented as list items and are '''descriptive'''. This means you don't waste space by pasting the entire url or writing something like "Click [http://tsgdoc.socsci.ru.nl/index.php?title=Sample here] to download the documentation". Examples: | + | Download links are presented as list items and are '''descriptive'''. This means you don't waste space by pasting the entire url or writing something like "Click [[Meta:Guidelines|here]] to download the documentation". Examples: |
| *[[:File:riv2 quickstart.pdf|Uploaded file with version control]] | | *[[:File:riv2 quickstart.pdf|Uploaded file with version control]] |
− | *[[Media:BITSI_tempalte2015_duemilanove.zip|Directly downloadable file]] | + | *[[Media:BITSI_tempalte2015_duemilanove.zip|Directly downloadable file]] (zip) |
| + | |
| + | ==References== |
| + | <references /> |