lilypond-user
[Top][All Lists]
Advanced
[Date Prev][Date Next][Thread Prev][Thread Next][Date Index][Thread Index]

Re: Feedback wanted: syntax highlighting in the LilyPond documentation

From: Aaron Hill
Subject: Re: Feedback wanted: syntax highlighting in the LilyPond documentation
Date: Tue, 04 Jan 2022 08:23:48 -0800
User-agent: Roundcube Webmail/1.4.9 
On 2022-01-04 7:29 am, Erika Pirnes wrote:

Would it be terribly difficult to have a color setting on the
documentation page, so that people can choose between black and color?


It is fairly straightforward with CSS and a little JavaScript:


<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Dynamic styles</title>
  <style>
    body { font-size: 36pt; }
    .button {
      background: #999; border-radius: 9pt;
      cursor: pointer; display: inline-block;
      padding: 9pt; user-select: none;
    }
    .colors > code > .type { color: purple; }
    .colors > code > .identifier { color: blue; }
    .colors > code > .keyword { color: brown; }
    .colors > code > .number { color: darkgoldenrod; }
    .colors > code > .string { color: green; }
    .colors > code > .punctuation { color: gray; }
  </style>
</head>
<body>
  <script>
    function toggleColors() {
      if (document.body.classList.contains('colors')) {
        document.body.classList.remove('colors');
      } else {
        document.body.classList.add('colors');
      }
    }
  </script>
  <div class="button" onclick="toggleColors()">Toggle Colors</div><br/>

  <code>
    <span class="type">int</span>
<span class="identifier">main</span><span class="punctuation">() {</span><br/> &nbsp;&nbsp;<span class="identifier">printf</span><span class="punctuation">(</span><span class="string">"Hello, World!\n"</span><span class="punctuation">);</span><br/> 
    &nbsp;&nbsp;<span class="keyword">return</span>
    <span class="number">0</span><span class="punctuation">;</span><br/>
    <span class="punctuation">}</span>
  </code>
</body>
</html>


-- Aaron Hill
reply via email to
[Prev in Thread] Current Thread [Next in Thread]