---
title: Как "оживить" примеры кода
slug: MDN/Contribute/Howto/Convert_code_samples_to_be_live
translation_of: MDN/Contribute/Howto/Convert_code_samples_to_be_live
---
<div>{{MDNSidebar}}</div><p class="summary">MDN имеет систему «<a href="/ru/docs/MDN/Contribute/Editor/Live_samples">живых примеров</a>», где пример кода, показанный на странице, служит для отображения вывода этого же примера. Однако во многих существующих статьях есть примеры кода, которые ещё не используют эту систему, и их необходимо преобразовать.</p>

<p><span class="seoSummary">Живые примеры, позволяющие продемонстрировать работу кода, делают документацию более динамичной и наглядной. В этом руководстве описывается, как "оживить" существующие примеры.</span></p>

<dl>
 <dt><strong>Где это необходимо сделать?</strong></dt>
 <dd>В статьях с тегом <a href="/en-US/docs/tag/NeedsLiveSample">NeedsLiveSample</a></dd>
 <dt><strong>Что вам нужно знать, чтобы начать?</strong></dt>
 <dd>
 <ul>
  <li>Понимание HTML, CSS и/или JavaScript, в зависимости от примера кода.</li>
  <li>Способность использовать макросы <a href="/ru/docs/MDN/Contribute/Tools/KumaScript">KumaScript</a> в статьях MDN.</li>
 </ul>
 </dd>
 <dd><strong>Что нужно для этого сделать?</strong></dd>
 <dd>
 <ol>
  <li>Выберите статью из списка статей с тегами <a href="/en-US/docs/tag/NeedsLiveSample">NeedsLiveSample</a>, где есть пример кода, с понятной, для вас функцией.</li>
  <li>Преобразуйте пример кода, чтоб он стал "живым".</li>
  <li>Удалите любой код или изображение, которые использовались для наглядного примера вывода результата работы кода.</li>
 </ol>
 </dd>
</dl>

<p>Подробнее об создании и редактировании живых примеров, см. <a href="/ru/docs/MDN/Contribute/Editor/Live_samples">Использование системы живых примеров</a></p>