Files

<pl-question-panel>
  <p>Questions below were designed to showcase the different features of
    <a href="https://docs.prairielearn.com/elements/pl-code"><code>pl-code</code></a>.
    The goal of <a
      href="https://docs.prairielearn.com/elements/pl-code"><code>pl-code</code></a>
    is to display different programming languages with appropriate syntax highlighting and code line emphasis.
  </p>
</pl-question-panel>

<pl-card>
  <pl-question-panel>
    <p>
      The most common use of <code>pl-code</code> is to display pre-written code with appropriate syntax highlighting.
      The language must be specified with the <code>language</code> attribute. In this case, we are requesting
      python with <code>language="python"</code>. We also enable the copy code button by setting
      <code>copy-code-button="True"</code>. Additionally, we ensure the code is indented to the start of the line by
      setting <code>normalize-whitespace="true"</code>.
    </p>
    <pl-code language="python" copy-code-button="True" normalize-whitespace="true">
      def square(x):
          return x * x
    </pl-code>

    <p>You can disable selection of the code region using the <code>prevent-select="true"</code> attribute.</p>
    <pl-code language="python" prevent-select="true" normalize-whitespace="true">
      def square(x):
          return x * x
    </pl-code>
  </pl-question-panel>
</pl-card>

<pl-card>
  <pl-question-panel>
    <p>
      Another useful feature of <code>pl-code</code> is the ability to highlight specific lines. This is done by using
      <code>highlight-lines="..." </code>attribute.
    </p>
    <pl-code language="python" highlight-lines="4-5" normalize-whitespace="true">
      def foo():
          return 'foo'

      def square(x):
          return x * x

      def bar(x):
          return 'bar'
    </pl-code>
  </pl-question-panel>
</pl-card>

<pl-card>
  <pl-question-panel>
    <p>
      The <code>pl-code</code> element also provides the ability to have code included from an external file.
      This can be achieved with <code>source-file-name="myCode.py"</code> attribute.
    </p>
    <pl-code language="python" source-file-name="myCode.py"></pl-code>
    <pl-code language="html" source-file-name="sample-cd-data.xml"></pl-code>
  </pl-question-panel>
</pl-card>

<pl-card>
  <pl-question-panel>
    <p>
      To change the style in use for a particular code block, the attribute <code>style-name</code> can be used. Any of <a
        href="https://pygments.org/styles/" target="_blank" rel="noreferrer">the built-in pygments styles</a> may be used. The examples
      below use the <code>sas</code>, <code>staroffice</code> and <code>github-dark</code> styles, respectively.
    </p>
    <pl-code language="python" style-name="sas" source-file-name="myCode.py"></pl-code>
    <pl-code language="python" style-name="staroffice" source-file-name="myCode.py"></pl-code>
    <pl-code language="python" style-name="github-dark" source-file-name="myCode.py"></pl-code>
  </pl-question-panel>
</pl-card>

<pl-card>
  <pl-question-panel>
    <p>
      The <code>pl-code</code> element can also be used to show output of a terminal command using ANSI colors, by setting
      the language attribute to <code>ansi-color</code>.
    </p>
    <pl-code language="ansi-color" style-name="github-dark" source-file-name="ansiOutput.txt"></pl-code>
  </pl-question-panel>
</pl-card>

<pl-card>
  <pl-question-panel>
    <p>
      Combined with the Python <code>pprint</code> module, the <code>pl-code</code> element can be used to display complex
      Python objects that cannot be JSON serialized
      easily. In particular, we used the <code>pprint.pformat()</code> function to generate the string to display below.
      We also enabled line numbers by setting
      <code>show-line-numbers="True"</code>.
    </p>
<pl-code language="python" show-line-numbers="True" copy-code-button="True">
my_object = \
{{params.my_object_string}}
</pl-code>
  </pl-question-panel>
</pl-card>