Changes

Jump to navigation Jump to search
1,061 bytes added ,  16:11, 31 March 2017
no edit summary
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 [[Main_Page|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 />

Navigation menu