# Academy Content Editing Rules
We use [LearnWorlds](https://www.learnworlds.com/) platform for the academy materials and homework.
Here you find some useful rules on how to make it look better.
## General
The platform provides both WYSIWYG and HTML editors. WYSIWYG editor is not quite powerful, so we'll use it in conjunction with the HTML editor.
Also, we can embed custom JS code, CSS styles, etc. But it is important to note that all this code will be applied to the rendered content only but not to the internal editor. Don't be surprised if the layout looks different in the internal editor and on the rendered page.
## Headers
Prefer to use `h2` headers inside the text.
| Code inside block | Rendered |
|-------------------|-----------------------------------------------|
| `Lesson Summary` |  |
## Paragraphs
**Important**: Every paragraph should be in a separate block in the WYSIWYG editor. Such kinds of blocks are more convenient to be edited in the HTML editor, as well as to be translated into other languages.
❌ **Wrong**:
✅ **Correct**:
Use `<code>` tag for inlining pieces of programming code.
**Example**:
```
Declare the <code>main()</code> function in the program.
```
**Rendered**:
Declare the `main()` function in the program.
## Lists
Use embedded unordered (`<ul>`) and ordered (`<ol>`) lists from the WYSIWYG editor. Avoid using bullets or numbers with ordinary text.
Use nested tags for nested lists.
❌ **Wrong HTML**:
```
• One<br>
• Two<br>
• Three<br>
◦ Nested<br>
1. One<br>
2. Two<br>
3. Three<br>
```
✅ **Correct HTML**:
```plain
<ul>
<li>One</li>
<li>Two</li>
<li>Three</li>
<li>
<ul><li>Nested</li><ul>
</li>
</ul>
<ol>
<li>One</li>
<li>Two</li>
<li>Three</li>
</ol>
```
## Code blocks
The simplest way to add code blocks is to use the HTML editor. Use `<code>` tag inside `<pre>` block.
We use [**highlight.js**](https://highlightjs.org/) for source code highlighting. So it is recommended to set the language explicitly.
**Examples**:
```html!
<pre><code class="language-plaintext">It is a text with no highlighting.</code></pre>
```
```html
<pre><code class="language-bash"># bash
mkdir work
cd work
</code></pre>
```
```html
<pre><code class="language-toml"># TOML / INI
[dependencies]
serde = { version = "1", default-features = false }
tokio = "1.28"
</code></pre>
```
```html
<pre><code class="language-rust">// Rust
fn main() {
println!("Hello, world!");
}</code></pre>
```
**Rendered**:
```
It is plain text without highlighting.
```
```bash
# bash
mkdir work
cd work
```
```ini
# TOML / INI
[dependencies]
serde = { version = "1", default-features = false }
tokio = "1.28"
```
```rust
// Rust
fn main() {
println!("Hello, world!");
}
```
**highlight.js** adds wrapping to code blocks automatically. But the editor doesn't wrap code lines. If you want it to wrap the code, add `style="white-space: pre-wrap;"` attribute to the `<code>` tag. Otherwise, if you don't want to wrap rendered source code lines, use the `style="white-space: pre;"` attribute.
**Examples**:
```html
<pre><code class="language-plaintext" style="white-space: pre;">No wrapped looooooong line of plain text.</code></pre>
```
```html!
<pre><code class="language-rust" style="white-space: pre-wrap;">fn hello() {
// Long comment in Rust source code that will be wrapped both in editor and on the rendered page
}</code></pre>
```
**Important**: No any tags allowed inside `<pre><code>` block. All `<` and `>` symbols are to be replaced with `<` and `>`.
**Example**:
```html!
<pre><code class="language-rust">let opt: Option<String> = None;</code></pre>
```
**Rendered**:
```rust
let opt: Option<String> = None;
```
## Custom code
We have added some custom code for syntax highlighting and HTML elements styling. Go to **Site Builder** > **Custom Code** to reach it.
### Javascript
We use **highlight.js** for source code highlighting. It supports many popular programming languages.
Also, we add CSS style from [mdBook](https://rust-lang.github.io/mdBook/).
The custom code is in `<body> logged in (html)` section:
```html!
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.7.0/styles/default.min.css">
<link rel="stylesheet" href="https://rust-lang.github.io/mdBook/highlight.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.7.0/highlight.min.js"></script>
<script type="text/javascript">
document.addEventListener('DOMContentLoaded', (event) => {
document.querySelectorAll('pre code').forEach((el) => {
hljs.highlightElement(el);
});
});
document.addEventListener('DOMNodeInserted', (e) => {
$(e.target).parent()[0].querySelectorAll('pre code').forEach((el) => {
hljs.highlightElement(el);
});
});
</script>
```
### CSS
Some styling tweaks are implemented using CSS in `<style> (css) for builtin pages (i.e. social, profile, workpad, my account)` section:
```css
.slug-ebookplayer .-context-menu-wrapper {
display: none !important;
}
code {
background-color: #f3f3f3;
border: .1rem solid #0000001a;
border-radius: 0.5rem;
padding: 0.1rem;
}
pre > code {
white-space: pre-wrap;
word-wrap: break-word;
padding: 1em;
display: block;
}
pre {
margin: 0px;
}
.eltext {
padding-bottom: 0px;
font-size: 18px;
min-height: 0px;
}
.ebook-centered-item.elh2 {
padding-bottom: 0px;
}
.elh2-text, .eltext h2 {
font-weight: normal;
}
```
Sign in with Wallet
Connect another wallet