分屏中的卡片

在分屏中的卡片中展示代码示例可以通过以下方法实现：

1. 使用HTML的<pre>标签和<code>标签来包裹代码示例。在<pre>标签中使用CSS样式设置卡片的样式，如背景颜色、边框样式等。将代码示例放置在<code>标签中，这样可以保持代码的格式和缩进。

<div class="card">
  <pre>
    <code>
      // 代码示例
      function helloWorld() {
        console.log("Hello, World!");
      }
    </code>
  </pre>
</div>

2. 使用CSS样式来创建卡片效果。可以使用border属性设置边框样式，background-color属性设置背景颜色，padding属性设置内边距等来创建卡片的外观。

<style>
  .card {
    border: 1px solid #ccc;
    background-color: #f9f9f9;
    padding: 10px;
  }
</style>

<div class="card">
  // 代码示例
  function helloWorld() {
    console.log("Hello, World!");
  }
</div>

3. 使用CSS框架或库，如Bootstrap，来创建卡片效果。Bootstrap提供了一系列的CSS类可以方便地创建卡片样式。

<div class="card">
  <div class="card-body">
    // 代码示例
    function helloWorld() {
      console.log("Hello, World!");
    }
  </div>
</div>

以上是几种常见的在分屏中展示代码示例的方法，可以根据具体需求选择适合的方式来实现。