update style page with information on when to use which references in the tabs

Author: titusfortner

website_and_docs/content/documentation/about/style.en.md

@@ -105,8 +105,7 @@ The Docsy code tabs look like this:
 To generate the above tabs, this is what you need to write.
 Note that the `tabpane` includes `langEqualsHeader=true`.
 This auto-formats the code in each tab to match the header name,
-but more importantly it ensures that all tabs on the page with a language
-are set to the same thing, so we always want to include it.
+and ensures that all tabs on the page with a language are set to the same thing.
 
     {{</* tabpane langEqualsHeader=true */>}}
       {{</* tab header="Java" */>}}
@@ -129,7 +128,7 @@ are set to the same thing, so we always want to include it.
       {{</* /tab */>}}
     {{</* /tabpane */>}}
 
-#### Reference Github Examples
+#### Reference GitHub Examples
 
 To ensure that all code is kept up to date, our goal is to write the code in the repo where it
 can be executed when Selenium versions are updated to ensure that everything is correct.
@@ -138,19 +137,18 @@ All code examples to be in our
 [example directories](https://github.com/SeleniumHQ/seleniumhq.github.io/tree/dev/examples).
 
 This code can be automatically displayed in the documentation using the `gh-codeblock` shortcode.
-The shortcode automatically generates its own html, so if any tab is using this shortcode,
-set `text=true` in the `tabpane`/`tab` to prevent the auto-formatting, and add `code=true` in any
-`tab` that still needs to get formatted with code. 
-Either way, set `langEqualsHeader=true` to keep the language tabs synchronized throughout the page. 
-Note that the `gh-codeblock` line can not be indented at all.
+The shortcode automatically generates its own html, so we do not want it to auto-format with the language header.
+If all tabs are using this shortcode, set `text=true` in the `tabpane` and remove `langEqualsHeader=true`.
+If only some tabs are using this shortcode, keep `langEqualsHeader=true` in the `tabpane` and add `text=true`
+to the `tab`. Note that the `gh-codeblock` line can not be indented at all.
 
 One great thing about using `gh-codeblock` is that it adds a link to the full example.
 This means you don't have to include any additional context code, just the line(s) that
 are needed, and the user can navigate to the repo to see how to use it.
 
 A basic comparison of code looks like:
 
-    {{</* tabpane text=true langEqualsHeader=true */>}}
+    {{</* tabpane text=true */>}}
     {{</* tab header="Java" */>}}
     {{</* gh-codeblock path="examples/java/src/test/java/dev/selenium/getting_started/FirstScript.java#L46-L47" */>}}
     {{</* /tab */>}}
@@ -173,7 +171,7 @@ A basic comparison of code looks like:
 
 Which looks like this:
 
-{{< tabpane text=true langEqualsHeader=true >}}
+{{< tabpane text=true >}}
 {{< tab header="Java" >}}
 {{< gh-codeblock path="examples/java/src/test/java/dev/selenium/getting_started/FirstScript.java#L46-L47" >}}
 {{< /tab >}}
@@ -200,7 +198,7 @@ If you want your example to include something other than code (default) or html
 you need to first set `text=true`, 
 then change the Hugo syntax for the `tab`to use `%` instead of `<` and `>` with curly braces:
 
-    {{</* tabpane text=true langEqualsHeader=true */>}}
+    {{</* tabpane text=true */>}}
     {{%/* tab header="Java" */%}}
     1. Start the driver
     {{</* gh-codeblock path="examples/java/src/test/java/dev/selenium/getting_started/FirstScript.java#L17" */>}}
@@ -214,7 +212,7 @@ then change the Hugo syntax for the `tab`to use `%` instead of `<` and `>` with
 
 This produces:
 
-{{< tabpane text=true langEqualsHeader=true >}}
+{{< tabpane text=true >}}
 {{% tab header="Java" %}}
 1. Start the driver
 {{< gh-codeblock path="examples/java/src/test/java/dev/selenium/getting_started/FirstScript.java#L17" >}}

website_and_docs/content/documentation/about/style.ja.md

@@ -104,8 +104,7 @@ The Docsy code tabs look like this:
 To generate the above tabs, this is what you need to write.
 Note that the `tabpane` includes `langEqualsHeader=true`.
 This auto-formats the code in each tab to match the header name,
-but more importantly it ensures that all tabs on the page with a language
-are set to the same thing, so we always want to include it.
+and ensures that all tabs on the page with a language are set to the same thing.
 
     {{</* tabpane langEqualsHeader=true */>}}
       {{</* tab header="Java" */>}}
@@ -128,7 +127,7 @@ are set to the same thing, so we always want to include it.
       {{</* /tab */>}}
     {{</* /tabpane */>}}
 
-#### Reference Github Examples
+#### Reference Gitub Examples
 
 To ensure that all code is kept up to date, our goal is to write the code in the repo where it
 can be executed when Selenium versions are updated to ensure that everything is correct.
@@ -137,19 +136,18 @@ All code examples to be in our
 [example directories](https://github.com/SeleniumHQ/seleniumhq.github.io/tree/dev/examples).
 
 This code can be automatically displayed in the documentation using the `gh-codeblock` shortcode.
-The shortcode automatically generates its own html, so if any tab is using this shortcode,
-set `text=true` in the `tabpane`/`tab` to prevent the auto-formatting, and add `code=true` in any
-`tab` that still needs to get formatted with code. 
-Either way, set `langEqualsHeader=true` to keep the language tabs synchronized throughout the page. 
-Note that the `gh-codeblock` line can not be indented at all.
+The shortcode automatically generates its own html, so we do not want it to auto-format with the language header.
+If all tabs are using this shortcode, set `text=true` in the `tabpane` and remove `langEqualsHeader=true`.
+If only some tabs are using this shortcode, keep `langEqualsHeader=true` in the `tabpane` and add `text=true`
+to the `tab`. Note that the `gh-codeblock` line can not be indented at all.
 
 One great thing about using `gh-codeblock` is that it adds a link to the full example.
 This means you don't have to include any additional context code, just the line(s) that
 are needed, and the user can navigate to the repo to see how to use it.
 
 A basic comparison of code looks like:
 
-    {{</* tabpane text=true langEqualsHeader=true */>}}
+    {{</* tabpane text=true */>}}
     {{</* tab header="Java" */>}}
     {{</* gh-codeblock path="examples/java/src/test/java/dev/selenium/getting_started/FirstScript.java#L46-L47" */>}}
     {{</* /tab */>}}
@@ -172,7 +170,7 @@ A basic comparison of code looks like:
 
 Which looks like this:
 
-{{< tabpane text=true langEqualsHeader=true >}}
+{{< tabpane text=true >}}
 {{< tab header="Java" >}}
 {{< gh-codeblock path="examples/java/src/test/java/dev/selenium/getting_started/FirstScript.java#L46-L47" >}}
 {{< /tab >}}
@@ -199,7 +197,7 @@ If you want your example to include something other than code (default) or html
 you need to first set `text=true`, 
 then change the Hugo syntax for the `tab`to use `%` instead of `<` and `>` with curly braces:
 
-    {{</* tabpane text=true langEqualsHeader=true */>}}
+    {{</* tabpane text=true */>}}
     {{%/* tab header="Java" */%}}
     1. Start the driver
     {{</* gh-codeblock path="examples/java/src/test/java/dev/selenium/getting_started/FirstScript.java#L17" */>}}
@@ -213,7 +211,7 @@ then change the Hugo syntax for the `tab`to use `%` instead of `<` and `>` with
 
 This produces:
 
-{{< tabpane text=true langEqualsHeader=true >}}
+{{< tabpane text=true >}}
 {{% tab header="Java" %}}
 1. Start the driver
 {{< gh-codeblock path="examples/java/src/test/java/dev/selenium/getting_started/FirstScript.java#L17" >}}

website_and_docs/content/documentation/about/style.pt-br.md

@@ -104,8 +104,7 @@ The Docsy code tabs look like this:
 To generate the above tabs, this is what you need to write.
 Note that the `tabpane` includes `langEqualsHeader=true`.
 This auto-formats the code in each tab to match the header name,
-but more importantly it ensures that all tabs on the page with a language
-are set to the same thing, so we always want to include it.
+and ensures that all tabs on the page with a language are set to the same thing.
 
     {{</* tabpane langEqualsHeader=true */>}}
       {{</* tab header="Java" */>}}
@@ -128,7 +127,7 @@ are set to the same thing, so we always want to include it.
       {{</* /tab */>}}
     {{</* /tabpane */>}}
 
-#### Reference Github Examples
+#### Reference GitHub Examples
 
 To ensure that all code is kept up to date, our goal is to write the code in the repo where it
 can be executed when Selenium versions are updated to ensure that everything is correct.
@@ -137,19 +136,18 @@ All code examples to be in our
 [example directories](https://github.com/SeleniumHQ/seleniumhq.github.io/tree/dev/examples).
 
 This code can be automatically displayed in the documentation using the `gh-codeblock` shortcode.
-The shortcode automatically generates its own html, so if any tab is using this shortcode,
-set `text=true` in the `tabpane`/`tab` to prevent the auto-formatting, and add `code=true` in any
-`tab` that still needs to get formatted with code. 
-Either way, set `langEqualsHeader=true` to keep the language tabs synchronized throughout the page. 
-Note that the `gh-codeblock` line can not be indented at all.
+The shortcode automatically generates its own html, so we do not want it to auto-format with the language header.
+If all tabs are using this shortcode, set `text=true` in the `tabpane` and remove `langEqualsHeader=true`.
+If only some tabs are using this shortcode, keep `langEqualsHeader=true` in the `tabpane` and add `text=true`
+to the `tab`. Note that the `gh-codeblock` line can not be indented at all.
 
 One great thing about using `gh-codeblock` is that it adds a link to the full example.
 This means you don't have to include any additional context code, just the line(s) that
 are needed, and the user can navigate to the repo to see how to use it.
 
 A basic comparison of code looks like:
 
-    {{</* tabpane text=true langEqualsHeader=true */>}}
+    {{</* tabpane text=true */>}}
     {{</* tab header="Java" */>}}
     {{</* gh-codeblock path="examples/java/src/test/java/dev/selenium/getting_started/FirstScript.java#L46-L47" */>}}
     {{</* /tab */>}}
@@ -172,7 +170,7 @@ A basic comparison of code looks like:
 
 Which looks like this:
 
-{{< tabpane text=true langEqualsHeader=true >}}
+{{< tabpane text=true >}}
 {{< tab header="Java" >}}
 {{< gh-codeblock path="examples/java/src/test/java/dev/selenium/getting_started/FirstScript.java#L46-L47" >}}
 {{< /tab >}}
@@ -199,7 +197,7 @@ If you want your example to include something other than code (default) or html
 you need to first set `text=true`, 
 then change the Hugo syntax for the `tab`to use `%` instead of `<` and `>` with curly braces:
 
-    {{</* tabpane text=true langEqualsHeader=true */>}}
+    {{</* tabpane text=true */>}}
     {{%/* tab header="Java" */%}}
     1. Start the driver
     {{</* gh-codeblock path="examples/java/src/test/java/dev/selenium/getting_started/FirstScript.java#L17" */>}}
@@ -213,7 +211,7 @@ then change the Hugo syntax for the `tab`to use `%` instead of `<` and `>` with
 
 This produces:
 
-{{< tabpane text=true langEqualsHeader=true >}}
+{{< tabpane text=true >}}
 {{% tab header="Java" %}}
 1. Start the driver
 {{< gh-codeblock path="examples/java/src/test/java/dev/selenium/getting_started/FirstScript.java#L17" >}}

website_and_docs/content/documentation/about/style.zh-cn.md

@@ -104,8 +104,7 @@ The Docsy code tabs look like this:
 To generate the above tabs, this is what you need to write.
 Note that the `tabpane` includes `langEqualsHeader=true`.
 This auto-formats the code in each tab to match the header name,
-but more importantly it ensures that all tabs on the page with a language
-are set to the same thing, so we always want to include it.
+and ensures that all tabs on the page with a language are set to the same thing.
 
     {{</* tabpane langEqualsHeader=true */>}}
       {{</* tab header="Java" */>}}
@@ -128,7 +127,7 @@ are set to the same thing, so we always want to include it.
       {{</* /tab */>}}
     {{</* /tabpane */>}}
 
-#### Reference Github Examples
+#### Reference GitHub Examples
 
 To ensure that all code is kept up to date, our goal is to write the code in the repo where it
 can be executed when Selenium versions are updated to ensure that everything is correct.
@@ -137,19 +136,18 @@ All code examples to be in our
 [example directories](https://github.com/SeleniumHQ/seleniumhq.github.io/tree/dev/examples).
 
 This code can be automatically displayed in the documentation using the `gh-codeblock` shortcode.
-The shortcode automatically generates its own html, so if any tab is using this shortcode,
-set `text=true` in the `tabpane`/`tab` to prevent the auto-formatting, and add `code=true` in any
-`tab` that still needs to get formatted with code. 
-Either way, set `langEqualsHeader=true` to keep the language tabs synchronized throughout the page. 
-Note that the `gh-codeblock` line can not be indented at all.
+The shortcode automatically generates its own html, so we do not want it to auto-format with the language header.
+If all tabs are using this shortcode, set `text=true` in the `tabpane` and remove `langEqualsHeader=true`.
+If only some tabs are using this shortcode, keep `langEqualsHeader=true` in the `tabpane` and add `text=true`
+to the `tab`. Note that the `gh-codeblock` line can not be indented at all.
 
 One great thing about using `gh-codeblock` is that it adds a link to the full example.
 This means you don't have to include any additional context code, just the line(s) that
 are needed, and the user can navigate to the repo to see how to use it.
 
 A basic comparison of code looks like:
 
-    {{</* tabpane text=true langEqualsHeader=true */>}}
+    {{</* tabpane text=true */>}}
     {{</* tab header="Java" */>}}
     {{</* gh-codeblock path="examples/java/src/test/java/dev/selenium/getting_started/FirstScript.java#L46-L47" */>}}
     {{</* /tab */>}}
@@ -172,7 +170,7 @@ A basic comparison of code looks like:
 
 Which looks like this:
 
-{{< tabpane text=true langEqualsHeader=true >}}
+{{< tabpane text=true >}}
 {{< tab header="Java" >}}
 {{< gh-codeblock path="examples/java/src/test/java/dev/selenium/getting_started/FirstScript.java#L46-L47" >}}
 {{< /tab >}}
@@ -199,7 +197,7 @@ If you want your example to include something other than code (default) or html
 you need to first set `text=true`, 
 then change the Hugo syntax for the `tab`to use `%` instead of `<` and `>` with curly braces:
 
-    {{</* tabpane text=true langEqualsHeader=true */>}}
+    {{</* tabpane text=true */>}}
     {{%/* tab header="Java" */%}}
     1. Start the driver
     {{</* gh-codeblock path="examples/java/src/test/java/dev/selenium/getting_started/FirstScript.java#L17" */>}}
@@ -213,7 +211,7 @@ then change the Hugo syntax for the `tab`to use `%` instead of `<` and `>` with
 
 This produces:
 
-{{< tabpane text=true langEqualsHeader=true >}}
+{{< tabpane text=true >}}
 {{% tab header="Java" %}}
 1. Start the driver
 {{< gh-codeblock path="examples/java/src/test/java/dev/selenium/getting_started/FirstScript.java#L17" >}}