Κώδικας

Χρησιμοποιήστε <code> για ενσωματωμένο κώδικα και <pre class="prettyprint"> για μπλοκ κώδικα. Η επισήμανση σύνταξης λειτουργεί καλά για πολλές γλώσσες, συμπεριλαμβανομένων των παραδειγμάτων XML και HTML. Μπορείτε να παραλείψετε class="prettyprint" εάν η επισήμανση σύνταξης δεν είναι κατάλληλη για το παράδειγμα, όπως για εντολές κονσόλας ή διευθύνσεις URL τελικού σημείου μεγάλης υπηρεσίας.

Μην υπερβαίνετε τους 100 χαρακτήρες κώδικα ανά γραμμή σε ένα μπλοκ <pre> . Στο DevSite, ακριβώς 100 χαρακτήρες κώδικα θα χωρέσουν σε μεγαλύτερες οθόνες πριν ξεκινήσει η οριζόντια κύλιση. Σε μικρότερες οθόνες, τα μπλοκ κώδικα θα πραγματοποιήσουν οριζόντια κύλιση όταν είναι απαραίτητο. 80 χαρακτήρες ταιριάζουν σχεδόν σε κάθε φορητό υπολογιστή.

#include <stdio.h>

/* Counting example */
int main(int argc, char** argv) {
    int i;

    // This counts from 0 to 9.
    for (i = 0; i < 10; i++) {
        printf("Counting %d\n", i);
    }
}
<pre class="prettyprint">
#include <stdio.h>

/* Counting example */
int main(int argc, char** argv) {
    int i;

    // This counts from 0 to 9.
    for (i = 0; i < 10; i++) {
        printf("Counting %d\n", i);
    }
}
</pre>

Συνήθως θα παραλείπατε class="prettyprint" από <pre> για εντολές κονσόλας. Για παράδειγμα:

dev_appserver.py -a $HOST --debug demos/getstarted
<pre>dev_appserver.py -a $HOST --debug demos/getstarted</pre>

Κάντε κλικ για αντιγραφή

Ένα κουμπί κλικ για αντιγραφή εμφανίζεται αυτόματα σε όλα τα μπλοκ κώδικα με την κλάση prettyprint .

Για να χρησιμοποιήσετε το click-to-copy σε ένα μπλοκ κώδικα ή άλλο στοιχείο που δεν έχει την κλάση prettyprint , προσθέστε την κλάση devsite-click-to-copy : some_terminal_command.py --users_should_copy <pre class="devsite-click-to-copy">some_terminal_command.py --users_should_copy</pre>

Απενεργοποίηση κλικ για αντιγραφή σε μπλοκ κώδικα

Για να απενεργοποιήσετε το click-to-copy σε ένα μπλοκ κώδικα prettyprint , προσθέστε την κλάση devsite-disable-click-to-copy :

www.example-url-that-does-not-make-sense-to-copy.com
<pre class="prettyprint devsite-disable-click-to-copy">www.example-url-that-does-not-make-sense-to-copy.com</pre>

Για να απενεργοποιήσετε το click-to-copy σε ένα μπλοκ κώδικα Markdown , χρησιμοποιήστε την ακόλουθη σύνταξη όταν ανοίγετε το φράχτη κώδικα για να εφαρμόσετε το στυλ devsite-disable-click-to-copy :

{:.devsite-disable-click-to-copy}

Απενεργοποίηση κλικ για αντιγραφή σε μέρος ενός μπλοκ κώδικα

Για να αποτρέψετε την αντιγραφή μέρους ενός μπλοκ κώδικα, προσθέστε μια ετικέτα <span> με μια κλάση no-select γύρω από το τμήμα που δεν θέλετε να αντιγραφεί:

<span class="no-select">C:\> </span>ping google.com

Στο παρακάτω παράδειγμα, τόσο η μη αυτόματη αντιγραφή όσο και το κουμπί κλικ για αντιγραφή αγνοούν το σχολιασμένο τμήμα:

C:\\> ping google.com

Συμβάντα αναλυτικών στοιχείων κλικ για αντιγραφή

Για να αποσαφηνίσετε τα συμβάντα ανάλυσης κλικ για αντιγραφή, ορίστε το χαρακτηριστικό data-copy-event-label .

data-copy-event-label
<pre class="devsite-terminal devsite-click-to-copy" data-copy-event-label="unique_identifier"></pre>

Κλικ για αντιγραφή και προσβασιμότητα

Από προεπιλογή, όλα τα δείγματα κώδικα κλικ για αντιγραφή έχουν την ίδια ετικέτα για κάθε κουμπί κλικ για αντιγραφή: "Αντιγραφή δείγματος κώδικα". Σε σελίδες με πολλά δείγματα κώδικα, αυτό μπορεί να κάνει δύσκολη την πλοήγηση με πρόγραμμα ανάγνωσης οθόνης.

Για προσβασιμότητα, παρέχετε σε κάθε δείγμα κώδικα κλικ για αντιγραφή ένα χαρακτηριστικό data-label που επισημαίνει συνοπτικά και συνοπτικά το περιεχόμενο κάθε δείγματος κώδικα. Κάθε ετικέτα δείγματος κώδικα πρέπει να είναι μοναδική σε σχέση με όλες τις άλλες ετικέτες δείγματος κώδικα στη σελίδα. Αυτή η ετικέτα διαβάζεται από προγράμματα ανάγνωσης οθόνης εκτός από το "Αντιγραφή δείγματος κώδικα". {:.devsite-click-to-copy} <pre class="devsite-click-to-copy" data-label="Installation script"></pre>

Απενεργοποίηση εναλλαγής φωτός/σκούρου

Για να απενεργοποιήσετε το κουμπί εναλλαγής ανοιχτό/σκοτεινό σε ένα μπλοκ κώδικα, προσθέστε την κλάση devsite-disable-code-toggle :

<pre class="prettyprint devsite-disable-code-toggle"></pre>

Για να απενεργοποιήσετε το κουμπί εναλλαγής ανοιχτό/σκοτεινό σε ένα μπλοκ κώδικα Markdown , χρησιμοποιήστε την ακόλουθη σύνταξη όταν ανοίγετε το φράχτη κώδικα για να εφαρμόσετε την κλάση devsite-disable-code-toggle :

``` {.devsite-disable-code-toggle}

Σκοτεινός κώδικας από προεπιλογή

Για να κάνετε ένα μπλοκ κώδικα να χρησιμοποιεί το στυλ σκούρου κώδικα από προεπιλογή, προσθέστε την κλάση devsite-dark-code-default :

<pre class="prettyprint devsite-dark-code-default"></pre>

Δυνατότητα περιτύλιξης γραμμής

Από προεπιλογή, προστίθεται μια οριζόντια γραμμή κύλισης για γραμμές σε μπλοκ <pre> που υπερβαίνουν τους 100 χαρακτήρες.

run(dataset: google.cloud.aiplatform.datasets.time_series_dataset.TimeSeriesDataset, target_column: str, time_column: str, time_series_identifier_column: str, unavailable_at_forecast_columns: List[str], available_at_forecast_columns: List[str], forecast_horizon: int, data_granularity_unit: str, data_granularity_count: int, training_fraction_split: Optional[float] = None, validation_fraction_split: Optional[float] = None, test_fraction_split: Optional[float] = None, predefined_split_column_name: Optional[str] = None, weight_column: Optional[str] = None, time_series_attribute_columns: Optional[List[str]] = None, context_window: Optional[int] = None, export_evaluated_data_items: bool = False, export_evaluated_data_items_bigquery_destination_uri: Optional[str] = None, export_evaluated_data_items_override_destination: bool = False, quantiles: Optional[List[float]] = None, validation_options: Optional[str] = None, budget_milli_node_hours: int = 1000, model_display_name: Optional[str] = None, model_labels: Optional[Dict[str, str]] = None, sync: bool = True)

Για να παρακάμψετε αυτήν τη συμπεριφορά και να αναδιπλώσετε τις γραμμές, προσθέστε class="wrap-code" στο μπλοκ <pre> .

run(dataset: google.cloud.aiplatform.datasets.time_series_dataset.TimeSeriesDataset, target_column: str, time_column: str, time_series_identifier_column: str, unavailable_at_forecast_columns: List[str], available_at_forecast_columns: List[str], forecast_horizon: int, data_granularity_unit: str, data_granularity_count: int, training_fraction_split: Optional[float] = None, validation_fraction_split: Optional[float] = None, test_fraction_split: Optional[float] = None, predefined_split_column_name: Optional[str] = None, weight_column: Optional[str] = None, time_series_attribute_columns: Optional[List[str]] = None, context_window: Optional[int] = None, export_evaluated_data_items: bool = False, export_evaluated_data_items_bigquery_destination_uri: Optional[str] = None, export_evaluated_data_items_override_destination: bool = False, quantiles: Optional[List[float]] = None, validation_options: Optional[str] = None, budget_milli_node_hours: int = 1000, model_display_name: Optional[str] = None, model_labels: Optional[Dict[str, str]] = None, sync: bool = True)

Κώδικας:

<pre class="wrap-code">
run(dataset: google.cloud.aiplatform.datasets.time_series_dataset.TimeSeriesDataset, target_column: str, time_column: str, time_series_identifier_column: str, unavailable_at_forecast_columns: List[str], available_at_forecast_columns: List[str], forecast_horizon: int, data_granularity_unit: str, data_granularity_count: int, training_fraction_split: Optional[float] = None, validation_fraction_split: Optional[float] = None, test_fraction_split: Optional[float] = None, predefined_split_column_name: Optional[str] = None, weight_column: Optional[str] = None, time_series_attribute_columns: Optional[List[str]] = None, context_window: Optional[int] = None, export_evaluated_data_items: bool = False, export_evaluated_data_items_bigquery_destination_uri: Optional[str] = None, export_evaluated_data_items_override_destination: bool = False, quantiles: Optional[List[float]] = None, validation_options: Optional[str] = None, budget_milli_node_hours: int = 1000, model_display_name: Optional[str] = None, model_labels: Optional[Dict[str, str]] = None, sync: bool = True)
</pre>

Κωδικός τερματικού

Κατά την επίδειξη κώδικα για το τερματικό, συνιστούμε στους συντάκτες να χρησιμοποιούν $ για να υποδείξουν μια νέα εντολή τερματικού. Για να προσθέσετε $ στην αρχή των περιεχομένων ενός κοντέινερ <pre> χωρίς να το προσθέσετε στον αντιγραμμένο κώδικα του χρήστη, εφαρμόστε class="devsite-terminal" στο στοιχείο <pre> .

adb devices

Κώδικας:

<pre class="devsite-terminal devsite-click-to-copy">
adb devices
</pre>

Για να προσθέσετε $ στην αρχή μιας γραμμής κωδικού τερματικού, εφαρμόστε class="devsite-terminal" στο στοιχείο <code> που περιέχει αυτή τη γραμμή. Χρησιμοποιήστε αυτήν την τακτική για περιπτώσεις με $ σε πολλές γραμμές.

gradle init --type basic
mkdir -p src/main/java src/main/resources

Κώδικας:

<pre class="prettyprint">
<code class="devsite-terminal">gradle init --type basic</code>
<code class="devsite-terminal">mkdir -p src/main/java src/main/resources</code>
</pre

Για να χρησιμοποιήσετε ένα προσαρμοσμένο πρόθεμα, προσθέστε το χαρακτηριστικό data-terminal-prefix στο στοιχείο <pre> ή <code> όπου εφαρμόστηκε η κλάση.

Install-Package Google.Apis.Calendar.v3

Κώδικας:

<pre class="devsite-terminal devsite-click-to-copy" data-terminal-prefix="PM&gt; ">
Install-Package Google.Apis.Calendar.v3
</pre>

Όλες οι εμφανίσεις του προθέματος που προστέθηκαν χρησιμοποιώντας την κλάση "devsite-terminal" θα εξαιρεθούν από τον αντιγραμμένο κώδικα του χρήστη.

Επισήμανση

Χρησιμοποιήστε <strong> για να επιστήσετε την προσοχή στο περιεχόμενο ενός μπλοκ <pre> . Με αυτόν τον τρόπο θα ελαφρύνει το περιβάλλον περιεχόμενο για να τονιστεί η ενότητα που επισημαίνεται από το μπλοκ <strong> . Για παράδειγμα:

// ...
// ...
// ...
for (i = 0; i < 10; i++) {
    printf("Counting %d\n", i);

    if (i % 3 == 0) {
        someFunc(i);
    }
}
// ...
// ...
// ...

Κώδικας:

<pre class="prettyprint">
// ...
// ...
// ...
for (i = 0; i < 10; i++) {
    printf("Counting %d\n", i);

    <strong>if (i % 3 == 0) {
        someFunc(i);
    }</strong>
}
// ...
// ...
// ...
</pre>

Αντικαταστάσιμες μεταβλητές

Χρησιμοποιήστε <var> και κεφαλαία με κάτω παύλες για κείμενο με δυνατότητα αντικατάστασης μέσα στο <pre> . Για παράδειγμα:

dev_appserver.py YOUR_APP_DIR.

Κώδικας:

<pre>dev_appserver.py <var>YOUR_APP_DIR</var></pre>

Στο Markdown, περικλείστε τις ετικέτες <var> σε εισαγωγικά και χρησιμοποιήστε αγκύλες έκφρασης Jinja για να ξεφύγετε από τις ετικέτες, όπως αυτό: VAR_NAME .

Για παράδειγμα:

Hello, my name is YOUR_NAME.

Κώδικας:

    ```
    Hello, my name is YOUR_NAME.
    ```

Χαμήλωση τιμής

Μπορείτε επίσης να καθορίσετε μπλοκ κώδικα χρησιμοποιώντας το Markdown είτε με 4 κενά εσοχή στον κωδικό είτε περιφράσσοντάς τον με 3 backtick (```).

Για παράδειγμα:

    ```
    print("hello world")
    ```
    print("hello world")

και τα δύο γίνονται

<pre class="prettyprint notranslate" translate="no"><code>
print("hello world")
</code></pre>

Εάν χρησιμοποιείτε περιφραγμένα μπλοκ κώδικα (και όχι μπλοκ κώδικα με εσοχή), μπορείτε επίσης να καθορίσετε τη γλώσσα για το prettyprint για να το κατανοήσετε:

print("hello world")

γίνεται

<pre class="prettyprint notranslate lang-py" translate="no"><code>
print("hello world")
</code></pre>

Μπορείτε να βρείτε τη λίστα με τις αναγνωρισμένες γλώσσες στην τεκμηρίωση του Prettify .

Όλα τα μπλοκ κώδικα που δημιουργούνται μέσω του Markdown θα έχουν την κλάση prettyprint που εφαρμόζεται σε αυτά, εκτός εάν ορίσετε ρητά τη γλώσσα σε καμία. Μπορείτε να προσθέσετε επιπλέον κλάσεις στο μπλοκ κώδικα χρησιμοποιώντας προσαρμοσμένα χαρακτηριστικά :

The program completed successfully.

γίνεται

<pre class="devsite-disable-click-to-copy"><code>The program completed successfully.
</code></pre>