Как я могу показать код (особенно C++) на странице HTML?

Как я могу показать код на веб-сайте, используя HTML? По сути, у меня есть программа на C++, которой я хотел бы поделиться на своем веб-сайте, и я хочу показать ее на странице.

Есть ли способ показать код C++ в HTML, кроме использования текста HTML?

Источник

3 ответа

HTML включает тег под названием<code>, which is meant for the purpose you describe.

Спецификация даже включает пример соглашения об именах классов, чтобы указать, на каком языке написан код:

<pre><code class="language-pascal">var i: Integer;
    begin
        i := 1;
    end.</code></pre>

Я не знаю ни одного веб-браузера, который бы поддерживал такое соглашение (да ладно, Chrome), но средства подсветки синтаксиса JavaScript, упомянутые в других ответах, могли бы использовать его для своего волшебства.

Как вы можете видеть в примере, <code> тег обычно оборачивается в <pre> тег, который сохраняет пробелы, которые часто важны для кода.

Источник

Вы можете использовать SyntaxHighlighter. Это незаметно улучшит примеры кода на вашей странице с особой подсветкой синтаксиса для широкого спектра языков.

Вот пример для C++

<head>
  <link href="css/shCore.css" rel="stylesheet" type="text/css" />
  <link href="css/shThemeDefault.css" rel="stylesheet" type="text/css" />
</head>

<body>
  <pre class='brush: cpp'>
  // my first program in C++
  #include <iostream>
  using namespace std;

  int main ()
  {
    cout << "Hello World!";
    return 0;
  }
  </pre>

  <script src="js/shCore.js"></script>
  <script src="js/shBrushCpp.js"></script>
  <script>
    SyntaxHighlighter.all()
  </script>
</body>
Источник

Существуют различные подсветки синтаксиса. Google Code Prettify довольно хороший. (В любом случае достаточно для использования переполнения стека.)

Источник
Другие вопросы по тегам