2
2
title : " Style guide for Selenium documentation"
3
3
linkTitle : " Style"
4
4
weight : 6
5
- requiresTranslation : true
6
5
description : >-
7
6
Conventions for contributions to the Selenium documentation and code examples
8
7
---
@@ -129,8 +128,9 @@ The Docsy code tabs look like this:
129
128
130
129
To generate the above tabs, this is what you need to write.
131
130
Note that the ` tabpane ` includes ` langEqualsHeader=true ` .
132
- This auto-formats the code in each tab to match the header name
133
- and is also used to synchronize the tabs on the page.
131
+ This auto-formats the code in each tab to match the header name,
132
+ but more importantly it ensures that all tabs on the page with a language
133
+ are set to the same thing, so we always want to include it.
134
134
135
135
{{</* tabpane langEqualsHeader=true */>}}
136
136
{{</* tab header="Java" */>}}
@@ -163,9 +163,9 @@ All code examples to be in our
163
163
164
164
This code can be automatically displayed in the documentation using the ` gh-codeblock ` shortcode.
165
165
The shortcode automatically generates its own html, so if any tab is using this shortcode,
166
- set ` code=false ` in the ` tabpane ` to prevent the auto-formatting, and add ` code=true ` in any
167
- ` tab ` that still needs to get formatted with code.
168
- Either way, set ` langEqualsHeader=true ` to keep the language tabs synchronized throughout the page.
166
+ set ` text=true ` in the ` tabpane ` / ` tab ` to prevent the auto-formatting, and add ` code=true ` in any
167
+ ` tab ` that still needs to get formatted with code.
168
+ Either way, set ` langEqualsHeader=true ` to keep the language tabs synchronized throughout the page.
169
169
Note that the ` gh-codeblock ` line can not be indented at all.
170
170
171
171
One great thing about using ` gh-codeblock ` is that it adds a link to the full example.
@@ -174,7 +174,7 @@ are needed, and the user can navigate to the repo to see how to use it.
174
174
175
175
A basic comparison of code looks like:
176
176
177
- {{</* tabpane code=false langEqualsHeader=true */>}}
177
+ {{</* tabpane text=true langEqualsHeader=true */>}}
178
178
{{</* tab header="Java" */>}}
179
179
{{</* gh-codeblock path="examples/java/src/test/java/dev/selenium/getting_started/FirstScriptTest.java#L46-L47" */>}}
180
180
{{</* /tab */>}}
@@ -197,7 +197,7 @@ A basic comparison of code looks like:
197
197
198
198
Which looks like this:
199
199
200
- {{< tabpane code=false langEqualsHeader=true >}}
200
+ {{< tabpane text=true langEqualsHeader=true >}}
201
201
{{< tab header="Java" >}}
202
202
{{< gh-codeblock path="examples/java/src/test/java/dev/selenium/getting_started/FirstScriptTest.java#L46-L47" >}}
203
203
{{< /tab >}}
@@ -221,10 +221,10 @@ Which looks like this:
221
221
### Using Markdown in a Tab
222
222
223
223
If you want your example to include something other than code (default) or html (from ` gh-codeblock ` ),
224
- you need to first set ` code=false ` ,
224
+ you need to first set ` text=true ` ,
225
225
then change the Hugo syntax for the ` tab ` to use ` % ` instead of ` < ` and ` > ` with curly braces:
226
226
227
- {{</* tabpane code=false langEqualsHeader=true */>}}
227
+ {{</* tabpane text=true langEqualsHeader=true */>}}
228
228
{{%/* tab header="Java" */%}}
229
229
1. Start the driver
230
230
{{</* gh-codeblock path="examples/java/src/test/java/dev/selenium/getting_started/FirstScriptTest.java#L17" */>}}
@@ -238,7 +238,7 @@ then change the Hugo syntax for the `tab`to use `%` instead of `<` and `>` with
238
238
239
239
This produces:
240
240
241
- {{< tabpane code=false langEqualsHeader=true >}}
241
+ {{< tabpane text=true langEqualsHeader=true >}}
242
242
{{% tab header="Java" %}}
243
243
1 . Start the driver
244
244
{{< gh-codeblock path="examples/java/src/test/java/dev/selenium/getting_started/FirstScriptTest.java#L17" >}}
0 commit comments