You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
<!-- This is an auto-generated comment: release notes by coderabbit.ai
-->
## Summary by CodeRabbit
* **Documentation**
* Re-titled and reorganized guide into "Open Tabs" with new Visualizer
and panel settings sections.
* Expanded guidance for auto-opening files, alternative Markdown
directives, image drag/display behavior, and external URL previews.
* Added terminal usage and automated command subsections.
* Added stepwise code-highlighting setup, unique-reference guidance, and
additional options; standardized headings, notes, images, and style.
<sub>✏️ Tip: You can customize this high-level summary in your review
settings.</sub>
<!-- end of auto-generated comment: release notes by coderabbit.ai -->
Copy file name to clipboardExpand all lines: source/instructors/authoring/guides/settings/opentabs.rst
+90-84Lines changed: 90 additions & 84 deletions
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -3,8 +3,8 @@
3
3
4
4
.. _open-tabs:
5
5
6
-
Open tabs
7
-
=========
6
+
Open Tabs
7
+
==========
8
8
You can automatically perform any of the following actions when a page is shown:
9
9
10
10
- Reconfigure the overall IDE panel layout.
@@ -14,23 +14,28 @@ You can automatically perform any of the following actions when a page is shown:
14
14
- Select lines you wish to highlight within each file.
15
15
- Open a :ref:`virtual machine <virtualmachine>` when set up for students.
16
16
17
-
You should also be aware that you can achieve the same actions from Markdown directives on a page. :ref:`click here <open-close>` for details.
17
+
**Opening Files Automatically**
18
18
19
-
20
-
Files can be opened automatically to present the student with relevant files.
19
+
Files can be opened automatically to present students with relevant content. You have several options for adding files:
21
20
22
-
The **Add Tab** button allows you to create multiple lines into your configuration to address most scenarios you are likely to encounter.
21
+
- Use the **Add Tab** button to add multiple files to your layout
22
+
- Drag and drop files from your project file tree directly onto the **Open Tabs** section
23
+
- Drag and drop files onto the Open Tabs area in the content
23
24
24
-
You can also drag and drop files in from your project file tree to the page to add them to the **Open Tabs** section so that file will be opened in a tab for the reader as well as Drag and Drop on the Open Tabs area in the content.
25
+
**Alternative Method**
26
+
27
+
You can achieve the same functionality using Markdown directives on a page. :ref:`Click here <open-close>` for details.
28
+
29
+
.. note:: Image files dragged onto a page will be automatically tagged to display within the content rather than in a new panel. If you wish to have an image file open in a panel, you need to add it directly in the Open Tabs area. You can also drag and drop from the file tree. The correct path to the file will be included automatically.
25
30
26
-
**Please note:** image files dragged in to a page will be automatically tagged to display within the content rather than in a new panel. If you wish to have an image file open in a panel, then you would need to add it directly in the Open Tabs area. You can also drag/drop from the file tree. The correct path to the file will be included.
27
31
28
32
Opening Files
29
33
*************
30
34
To open files, select the file type from the drop down and enter the file name, including the path to the file if not in the root (`/home/codio/workspace` or `~/workspace`) of the project workspace.
31
35
32
-
.. image:: /img/guides/type_file.png
33
-
:alt:open file
36
+
.. image:: /img/guides/type_file.png
37
+
:alt:open file
38
+
:width:450px
34
39
35
40
36
41
To open multiple files in the same panel, enter in the following format:
@@ -41,81 +46,92 @@ index.html, main.css
41
46
42
47
Previewing
43
48
**********
44
-
To preview your project, select the **Preview** type from the drop down. If you wish to show a workspace or external website page, use the **Preview** option and enter the appropriate URL.
49
+
To preview your project, select the **Preview** type from the dropdown. If you wish to show an external website page, use the **Preview** option and enter the appropriate URL.
45
50
46
-
.. image:: /img/guides/type_preview.png
47
-
:alt:Preview
51
+
.. image:: /img/guides/type_preview.png
52
+
:alt:Preview
53
+
:width:450px
48
54
49
55
50
56
51
-
**Please note:** If the URL you are previewing does not allow embedding in an `<iframe>`, then you won't be able to use `https` addresses. You would have to use an `http` address instead, in which case it will automatically open in a new browser tab and not within Codio.
57
+
..note::If the URL you are previewing does not allow embedding in an `<iframe>`, then you won't be able to use `https` addresses. You would have to use an `http` address instead, in which case it will automatically open in a new browser tab and not within Codio.
52
58
53
-
Opening the terminal and running system commands
59
+
Opening the Terminal and Running System Commands
54
60
************************************************
55
-
To open a terminal window, select the **Terminal** type from the drop down.
56
61
57
-
You can also specify a terminal command to run when a section is displayed. For example, your content may run bash scripts to copy files into the root (`/home/codio/workspace` or `~/workspace`) of your project from the `/.guides` folder (which is hidden when content is running) at a certain point in your content.
62
+
Opening a Terminal Window
63
+
^^^^^^^^^^^^^^^^^^^^^^^^^
58
64
59
-
.. image:: /img/guides/type_terminal.png
60
-
:alt:terminal
61
-
65
+
To open a terminal window, select **Terminal** from the type dropdown menu.
62
66
67
+
Running Commands Automatically
68
+
^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
63
69
64
-
You can also specify system commands in a new terminal window like so:
70
+
You can specify a terminal command to run automatically when a section is displayed. This is useful for setup tasks such as:
65
71
66
-
.. image:: /img/guides/terminal_command.png
67
-
:alt:terminal command
68
-
72
+
- Copying files from the hidden `/.guides` folder into the project root (`/home/codio/workspace` or `~/workspace`)
69
73
74
+
.. image:: /img/guides/type_terminal.png
75
+
:alt:terminal
70
76
71
-
Highlighting lines in your code
72
-
*******************************
73
-
To highlight one or more lines within an auto-opened file, select the **Highlight** type from the drop down and then
77
+
- Running bash scripts to prepare the environment
78
+
- Executing any necessary setup commands at specific points in your content
74
79
75
-
1. Enter a piece of reference text, contained within your target file, into the **Reference ...** field
76
-
2. Specify the number of lines, from that reference point, you want to highlight
80
+
.. image:: /img/guides/terminal_command.png
81
+
:alt:terminal command
77
82
78
-
.. image:: /img/guides/type_highlight.png
79
-
:alt:Highlight
80
-
81
83
82
84
83
-
Using reference text rather than a line number means that if you insert anything into your file in the future, Codio is able to adjust the highlighted block based on the reference text. If you insert or remove lines within the block then you would need to adjust the line count.
85
+
Highlighting Lines in Your Code
86
+
********************************
84
87
85
-
If there is any potential ambiguity with this approach, simply insert a comment which is guaranteed unique and reference that.
88
+
Setting Up Code Highlighting
89
+
^^^^^^^^^^^^^^^^^^^^^^^^^^^^
86
90
87
-
Any combinations are acceptable and they will be opened in the order specified.
91
+
To highlight one or more lines within an auto-opened file:
88
92
89
-
If you wish to higlighlight code but not allow students to make any changes, you can :ref:`freeze code <freezecode>` in code files.
93
+
1. Select **Highlight** from the type dropdown menu
94
+
2. Enter a piece of reference text from your target file into the **Reference...** field
95
+
3. Specify the number of lines to highlight from that reference point
90
96
91
-
.. _code-visualiser:
97
+
.. image:: /img/guides/type_highlight.png
98
+
:alt:Highlight
92
99
93
-
Visualiser
94
-
**********
100
+
Why Use Reference Text?
101
+
^^^^^^^^^^^^^^^^^^^^^^^
95
102
96
-
Codio supports `Python Tutor <http://pythontutor.com>`_, allowing students to overcome a fundamental barrier to learning programming: understanding what happens as the computer executes each line of a program's source code.
97
-
Select `Visualiser` and enter the path to your file.
103
+
Using reference text instead of line numbers makes your highlighting more resilient to changes. If you add or remove lines elsewhere in your file, Codio automatically adjusts the highlighted block based on the reference text.
98
104
99
-
**Supported languages:**
105
+
.. note:: If you insert or remove lines *within* the highlighted block, you'll need to adjust the line count manually.
100
106
101
-
- Python
102
-
- Java
103
-
- JavaScript
104
-
- TypeScript
105
-
- Ruby
106
-
- C
107
-
- C++
107
+
Ensuring Unique References
108
+
^^^^^^^^^^^^^^^^^^^^^^^^^^
108
109
109
-
Students can visualise what the computer is doing step-by-step as it executes those programs.
110
+
If there's any potential ambiguity with your reference text, insert a unique comment in your code and reference that instead.
111
+
112
+
Additional Options
113
+
^^^^^^^^^^^^^^^^^^
114
+
115
+
- Multiple highlight configurations are supported and will be applied in the order specified
116
+
- To highlight code while preventing student edits, you can :ref:`freeze code <freezecode>` in code files
117
+
118
+
.. _code-visualizer:
119
+
120
+
Visualizer
121
+
**********
122
+
123
+
Codio supports `Python Tutor <http://pythontutor.com>`_, allowing students to overcome a fundamental barrier to learning programming: understanding what happens as the computer executes each line of a program's source code.
124
+
Select `Visualizer` and enter the path to your file.
110
125
111
-
.. image:: /img/guides/pythontutor.png
112
-
:alt:python tutor
113
126
127
+
Students can visualize what the computer is doing step-by-step as it executes those programs.
0 commit comments