MoodleDocs:Style guide: Difference between revisions
From MoodleDocs
m (→Screenshots: now File:Screenshot.png) |
Helen Foster (talk | contribs) (→Describing the location of items: updates) |
||
(19 intermediate revisions by 8 users not shown) | |||
Line 1: | Line 1: | ||
{{Help}} | {{Help}} | ||
==Describing the location of items== | |||
Examples: | |||
* The setting 'Language autodetect' in 'Site administration > General > Language settings' (with the nav trail in italics). | |||
* In the Boost theme, we have a course index and course navigation. | |||
* 'Course navigation > Participants' then from the dropdown select Groups | |||
* 'Course navigation > More > Course reuse'. | |||
* From the user menu (top right) select Preferences then Notifications preferences. | |||
* 'Course navigation > Grades'. | |||
== Categories == | == Categories == | ||
A | A category is an index of documentation pages. | ||
* A page can be added to a category by typing <code><nowiki>[[Category:Category name]]</nowiki></code>, for example <code><nowiki>[[Category: | * A page can be added to a category by typing <code><nowiki>[[Category:Category name]]</nowiki></code>, for example <code><nowiki>[[Category:Site administration]]</nowiki></code>, at the bottom of the page. Many templates automatically categorise pages using the template, for example <code><nowiki>[[Template:Forum]]</nowiki></code> categorises pages into [[:Category:Forum]]. | ||
* For '''linking to a category''' you have to add another colon like so: <code><nowiki>[[:Category:FAQ]]</nowiki></code> which will show as [[:Category:FAQ]]. | |||
* [[Special:Categories|Categories]] lists all Moodle Docs categories. This can be found in the Toolbox Special pages link. | * [[Special:Categories|Categories]] lists all Moodle Docs categories. This can be found in the Toolbox Special pages link. | ||
* For '''further information''' about categories and how they work in MediaWiki, please refer to the [https://en.wikipedia.org/wiki/Wikipedia:Categorization Wikipedia:Categorization]. | |||
* For '''further information''' about categories and how they work in MediaWiki, please refer to the [ | |||
== Screenshots == | == Screenshots == | ||
* You are encouraged to illustrate documentation with screenshots. Please use the official [ | * You are encouraged to illustrate documentation with screenshots. Please use the official [https://sandbox.moodledemo.net/ Moodle sandbox demo site], or any other site or course using one of the standard themes, and ensure that the screenshot focuses on the specific feature. | ||
* Screenshots should be | * Screenshots should be preferably PNG format, with 72ppi resolution, and maximum width 800px. | ||
* To fit more into a screenshot, select a smaller text size for the web page via the View > Text size menu in your web browser. | * To fit more into a screenshot, select a smaller text size for the web page via the View > Text size menu in your web browser. | ||
* Screenshots | * Screenshots should be uploaded using the Images icon in the editor. | ||
* Please name screenshots | * Please name screenshots using the convention 'version number + descriptive name such as page heading' e.g. 404backupsettings.png | ||
* Fill in alt text but no caption, not thumb, left aligned. | |||
* Ideally add a border 1px grey (if no grey background). | |||
* | |||
* | |||
==Templates== | ==Templates== | ||
Line 38: | Line 37: | ||
*[[MoodleDocs:Update|Update]] - Features increase with each Moodle version. If you find a page requiring updating, type <code><nowiki>{{Update}}</nowiki></code> at the top of the page. | *[[MoodleDocs:Update|Update]] - Features increase with each Moodle version. If you find a page requiring updating, type <code><nowiki>{{Update}}</nowiki></code> at the top of the page. | ||
*[[:MoodleDocs:Stub|Stub]] - Developers and Moodle Docs administrators may add a new page with a <code><nowiki>{{Stub}}</nowiki></code> tag at the top, requesting help in adding content. | *[[:MoodleDocs:Stub|Stub]] - Developers and Moodle Docs administrators may add a new page with a <code><nowiki>{{Stub}}</nowiki></code> tag at the top, requesting help in adding content. | ||
*You can also use the [[Help:Editing#Edit_summary|edit summary]] to communicate the need for more editing. For example in the page history you might see: "Added section, needs more work, see page comments". | *You can also use the [[Help:Editing#Edit_summary|edit summary]] to communicate the need for more editing. For example, in the page history you might see: "Added section, needs more work, see page comments". | ||
== PHP syntax highlighting == | == PHP syntax highlighting == | ||
* To highlight PHP syntax, enclose the code in tags: | * To highlight PHP syntax, enclose the code in tags: | ||
<pre><nowiki>< | <pre><nowiki><syntaxhighlight lang="php">... Some PHP code here...</syntaxhighlight></nowiki></pre> | ||
That will be rendered as: | That will be rendered as: | ||
< | <syntaxhighlight lang="php"> | ||
<?php | <?php | ||
require_once(dirname(__FILE__) . '/../../config.php'); | require_once(dirname(__FILE__) . '/../../config.php'); | ||
Line 56: | Line 55: | ||
} | } | ||
... | ... | ||
</ | </syntaxhighlight> | ||
* For long code examples you can even add '''line numbering''' like so: | * For long code examples you can even add '''line numbering''' like so: | ||
<pre><nowiki>< | <pre><nowiki><syntaxhighlight lang="php" line>... A lot of PHP code here...</syntaxhighlight></nowiki></pre> | ||
That will be rendered as: | That will be rendered as: | ||
< | <syntaxhighlight lang="php" line> | ||
<?php | <?php | ||
require_once(dirname(__FILE__) . '/../../config.php'); | require_once(dirname(__FILE__) . '/../../config.php'); | ||
Line 72: | Line 71: | ||
} | } | ||
... | ... | ||
</code | </syntaxhighlight> | ||
* But beware, line numbering makes copying & pasting of code examples more cumbersome! | |||
== CSS syntax highlighting == | |||
* To highlight CSS syntax, enclose the code in tags: | |||
<pre><nowiki><syntaxhighlight lang="css">... Some CSS code here...</syntaxhighlight></nowiki></pre> | |||
* Example: | |||
<syntaxhighlight lang="css"> | |||
.que .info .grade { display: none; } | |||
</syntaxhighlight> | |||
* You can see many examples of this in [https://docs.moodle.org/404/en/index.php?title=Quiz_FAQ&action=edit the Quiz FAQ Doc page]. | |||
* See also the documentation on [[Code syntax highlighting]] that uses the GeSHi (Generic Syntax Highlighter) filter. | |||
[[Category:MoodleDocs|Style guide]] | [[Category:MoodleDocs|Style guide]] | ||
[[de: | [[de:Moodle Docs StyleGuide]] | ||
[[es:MoodleDocs:Guía de Estilo]] | [[es:MoodleDocs:Guía de Estilo]] | ||
[[fr:MoodleDocs:Guide de style]] | [[fr:MoodleDocs:Guide de style]] | ||
[[ja:MoodleDocs:スタイルガイド]] | [[ja:MoodleDocs:スタイルガイド]] | ||
[[zh:MoodleDocs:风格指引]] | [[zh:MoodleDocs:风格指引]] |
Latest revision as of 10:10, 28 June 2024
Describing the location of items
Examples:
- The setting 'Language autodetect' in 'Site administration > General > Language settings' (with the nav trail in italics).
- In the Boost theme, we have a course index and course navigation.
- 'Course navigation > Participants' then from the dropdown select Groups
- 'Course navigation > More > Course reuse'.
- From the user menu (top right) select Preferences then Notifications preferences.
- 'Course navigation > Grades'.
Categories
A category is an index of documentation pages.
- A page can be added to a category by typing
[[Category:Category name]]
, for example[[Category:Site administration]]
, at the bottom of the page. Many templates automatically categorise pages using the template, for example[[Template:Forum]]
categorises pages into Category:Forum. - For linking to a category you have to add another colon like so:
[[:Category:FAQ]]
which will show as Category:FAQ. - Categories lists all Moodle Docs categories. This can be found in the Toolbox Special pages link.
- For further information about categories and how they work in MediaWiki, please refer to the Wikipedia:Categorization.
Screenshots
- You are encouraged to illustrate documentation with screenshots. Please use the official Moodle sandbox demo site, or any other site or course using one of the standard themes, and ensure that the screenshot focuses on the specific feature.
- Screenshots should be preferably PNG format, with 72ppi resolution, and maximum width 800px.
- To fit more into a screenshot, select a smaller text size for the web page via the View > Text size menu in your web browser.
- Screenshots should be uploaded using the Images icon in the editor.
- Please name screenshots using the convention 'version number + descriptive name such as page heading' e.g. 404backupsettings.png
- Fill in alt text but no caption, not thumb, left aligned.
- Ideally add a border 1px grey (if no grey background).
Templates
- In MediaWiki, a template is a page which can be inserted into another page. For example, the Moodle Docs help block on this page is a template.
- A template may be added to a page by typing
{{Name}}
for Template:Name (template names are case sensitive). - All pages (Template namespace) lists all Moodle Docs templates.
- Please refer to the MediaWiki Template help for further information.
Moodle Docs editing tags
- Deletion - If you find any page requiring deletion, type
{{Deletion}}
at the top of the page. Use the page comments if necessary to state the reason for deletion. - Update - Features increase with each Moodle version. If you find a page requiring updating, type
{{Update}}
at the top of the page. - Stub - Developers and Moodle Docs administrators may add a new page with a
{{Stub}}
tag at the top, requesting help in adding content. - You can also use the edit summary to communicate the need for more editing. For example, in the page history you might see: "Added section, needs more work, see page comments".
PHP syntax highlighting
- To highlight PHP syntax, enclose the code in tags:
<syntaxhighlight lang="php">... Some PHP code here...</syntaxhighlight>
That will be rendered as:
<?php
require_once(dirname(__FILE__) . '/../../config.php');
$cmid = required_param('cmid', 0, PARAM_INT);
if (!$cm = get_coursemodule_from_id('quiz', $id)) {
print_error('invalidcoursemodule');
}
...
- For long code examples you can even add line numbering like so:
<syntaxhighlight lang="php" line>... A lot of PHP code here...</syntaxhighlight>
That will be rendered as:
<?php
require_once(dirname(__FILE__) . '/../../config.php');
$cmid = required_param('cmid', 0, PARAM_INT);
if (!$cm = get_coursemodule_from_id('quiz', $id)) {
print_error('invalidcoursemodule');
}
...
- But beware, line numbering makes copying & pasting of code examples more cumbersome!
CSS syntax highlighting
- To highlight CSS syntax, enclose the code in tags:
<syntaxhighlight lang="css">... Some CSS code here...</syntaxhighlight>
- Example:
.que .info .grade { display: none; }
- You can see many examples of this in the Quiz FAQ Doc page.
- See also the documentation on Code syntax highlighting that uses the GeSHi (Generic Syntax Highlighter) filter.