use <code> where appropriate

core/microhtml.php

@@ -8,11 +8,11 @@ use MicroHTML\HTMLElement;
 
 use function MicroHTML\{emptyHTML};
 use function MicroHTML\A;
+use function MicroHTML\CODE;
+use function MicroHTML\DIV;
 use function MicroHTML\FORM;
 use function MicroHTML\INPUT;
-use function MicroHTML\DIV;
 use function MicroHTML\OPTION;
-use function MicroHTML\PRE;
 use function MicroHTML\P;
 use function MicroHTML\SELECT;
 use function MicroHTML\SPAN;
@@ -87,7 +87,7 @@ function SHM_COMMAND_EXAMPLE(string $ex, string $desc): HTMLElement
 {
     return DIV(
         ["class" => "command_example"],
-        PRE($ex),
+        CODE($ex),
         P($desc)
     );
 }

core/util.php

@@ -708,7 +708,7 @@ function _fatal_error(\Exception $e): void
 		<p><b>Message:</b> '.html_escape($message).'
 		'.$q.'
 		<p><b>Version:</b> '.$version.' (on '.$phpver.')
-        <p><b>Stack Trace:</b></p><pre>'.$e->getTraceAsString().'</pre>
+        <p><b>Stack Trace:</b></p><pre><code>'.$e->getTraceAsString().'</code></pre>
 	</body>
 </html>
 ';

ext/bbcode/info.php

@@ -51,7 +51,7 @@ class BBCodeInfo extends ExtensionInfo
      <li>[ul]Unordered list[/ul]
      <li>[ol]Ordered list[/ol]
      <li>[li]List Item[/li]
-     <li>[code]<pre>print(\"Hello World!\");</pre>[/code]
+     <li>[code]<pre><code>print(\"Hello World!\");</code></pre>[/code]
      <li>[spoiler]<span style=\"background-color:#000; color:#000;\">Voldemort is bad</span>[/spoiler]
      <li>[quote]<blockquote><small>To be or not to be...</small></blockquote>[/quote]
      <li>[quote=Shakespeare]<blockquote><em>Shakespeare said:</em><br><small>... That is the question</small></blockquote>[/quote]

ext/bbcode/main.php

@@ -164,7 +164,7 @@ class BBCode extends FormatterExtension
             $middle = base64_decode(substr($text, $start + $l1, ($end - $start - $l1)));
             $ending = substr($text, $end + $l2, (strlen($text) - $end + $l2));
 
-            $text = $beginning . "<pre class='code'>" . $middle . "</pre>" . $ending;
+            $text = $beginning . "<pre><code>" . $middle . "</code></pre>" . $ending;
         }
         return $text;
     }

ext/bbcode/style.css

@@ -1,7 +1,3 @@
-.bbcode PRE.code {
-    background: #DEDEDE;
-	font-size: 0.9rem;
-}
 .bbcode BLOCKQUOTE {
 	border: 1px solid black;
 	padding: 8px;

ext/bbcode/test.php

@@ -37,7 +37,7 @@ class BBCodeTest extends ShimmiePHPUnitTestCase
     public function testCode(): void
     {
         $this->assertEquals(
-            "<pre class='code'>[b]bold[/b]</pre>",
+            "<pre><code>[b]bold[/b]</code></pre>",
             $this->filter("[code][b]bold[/b][/code]")
         );
     }

ext/bulk_add_csv/info.php

@@ -16,13 +16,11 @@ class BulkAddCSVInfo extends ExtensionInfo
     public string $description = "Bulk add server-side posts with metadata from CSV file";
     public ?string $documentation =
 "Adds posts from a CSV with the five following values:
-<pre>\"/path/to/image.jpg\",\"spaced tags\",\"source\",\"rating s/q/e\",\"/path/thumbnail.jpg\"</pre>
+<pre><code>\"/path/to/image.jpg\",\"spaced tags\",\"source\",\"rating s/q/e\",\"/path/thumbnail.jpg\"</code></pre>
-
+<b>e.g.</b> <pre><code>\"/tmp/cat.png\",\"shish oekaki\",\"http://shimmie.shishnet.org\",\"s\",\"tmp/custom.jpg\"</code></pre>
-<b>e.g.</b>
-<pre>\"/tmp/cat.png\",\"shish oekaki\",\"http://shimmie.shishnet.org\",\"s\",\"tmp/custom.jpg\"</pre>
 
 Any value but the first may be omitted, but there must be five values per line.
-<b>e.g.</b> <pre>\"/why/not/try/bulk_add.jpg\",\"\",\"\",\"\",\"\"</pre>
+<b>e.g.</b> <pre><code>\"/why/not/try/bulk_add.jpg\",\"\",\"\",\"\",\"\"</code></pre>
 
 Useful for importing tagged posts without having to do database manipulation.
 

ext/comment/theme.php

@@ -306,20 +306,20 @@ class CommentListTheme extends Themelet
     {
         return '<p>Search for posts containing a certain number of comments, or comments by a particular individual.</p>
         <div class="command_example">
-        <pre>comments=1</pre>
+        <code>comments=1</code>
         <p>Returns posts with exactly 1 comment.</p>
         </div>
         <div class="command_example">
-        <pre>comments>0</pre>
+        <code>comments>0</code>
         <p>Returns posts with 1 or more comments. </p>
         </div>
         <p>Can use &lt;, &lt;=, &gt;, &gt;=, or =.</p>
         <div class="command_example">
-        <pre>commented_by:username</pre>
+        <code>commented_by:username</code>
         <p>Returns posts that have been commented on by "username". </p>
         </div>
         <div class="command_example">
-        <pre>commented_by_userno:123</pre>
+        <code>commented_by_userno:123</code>
         <p>Returns posts that have been commented on by user 123. </p>
         </div>
         ';

ext/cron_uploader/theme.php

@@ -102,7 +102,7 @@ class CronUploaderTheme extends Themelet
                         <li style='text-align: left;'>You can inherit categories by creating a folder that ends with \";\". For instance category;\\tag1 would result in the tag category:tag1. This allows creating a category folder, then creating many subfolders that will use that category.</li>
                     </ol>
                     The cron uploader works by importing files from the queue folder whenever this url is visited:
-                <br/><pre><a href='$cron_url'>$cron_url</a></pre>
+                <br/><code><a href='$cron_url'>$cron_url</a></code>
 
             <ul>
                 <li>If an import is already running, another cannot start until it is done.</li>

ext/et_server/main.php

@@ -4,7 +4,7 @@ declare(strict_types=1);
 
 namespace Shimmie2;
 
-use function MicroHTML\{PRE};
+use function MicroHTML\{CODE};
 
 class ETServer extends Extension
 {
@@ -28,7 +28,7 @@ class ETServer extends Extension
                 foreach ($database->get_all("SELECT responded, data FROM registration ORDER BY responded DESC") as $row) {
                     $page->add_block(new Block(
                         $row["responded"],
-                        PRE(["style" => "text-align: left; overflow: scroll;"], $row["data"]),
+                        CODE(["style" => "text-align: left; overflow: scroll;"], $row["data"]),
                         "main",
                         $n++
                     ));

ext/favorites/theme.php

@@ -34,20 +34,20 @@ class FavoritesTheme extends Themelet
     {
         return '<p>Search for posts that have been favorited a certain number of times, or favorited by a particular individual.</p>
         <div class="command_example">
-        <pre>favorites=1</pre>
+        <code>favorites=1</code>
         <p>Returns posts that have been favorited once.</p>
         </div>
         <div class="command_example">
-        <pre>favorites>0</pre>
+        <code>favorites>0</code>
         <p>Returns posts that have been favorited 1 or more times</p>
         </div>
         <p>Can use &lt;, &lt;=, &gt;, &gt;=, or =.</p>
         <div class="command_example">
-        <pre>favorited_by:username</pre>
+        <code>favorited_by:username</code>
         <p>Returns posts that have been favorited by "username". </p>
         </div>
         <div class="command_example">
-        <pre>favorited_by_userno:123</pre>
+        <code>favorited_by_userno:123</code>
         <p>Returns posts that have been favorited by user 123. </p>
         </div>
         ';

ext/help_pages/style.css

@@ -3,9 +3,10 @@
 	padding-left: 16pt;
 }
 
-.command_example pre {
+.command_example code {
     padding:4pt;
     border: dashed 2px black;
+    background: inherit;
 }
 
 .command_example p {
@@ -13,7 +14,7 @@
 }
 
 @media (min-width: 750px) {
-    .command_example pre {
+    .command_example code {
         display: table-cell;
         width: 256px;
     }

ext/media/theme.php

@@ -10,11 +10,11 @@ class MediaTheme extends Themelet
     {
         return '<p>Search for posts based on the type of media.</p>
         <div class="command_example">
-        <pre>content:audio</pre>
+        <code>content:audio</code>
         <p>Returns posts that contain audio, including videos and audio files.</p>
         </div>
         <div class="command_example">
-        <pre>content:video</pre>
+        <code>content:video</code>
         <p>Returns posts that contain video, including animated GIFs.</p>
         </div>
         <p>These search terms depend on the posts being scanned for media content. Automatic scanning was implemented in mid-2019, so posts uploaded before, or posts uploaded on a system without ffmpeg, will require additional scanning before this will work.</p>

ext/mime/theme.php

@@ -21,7 +21,7 @@ class MimeSystemTheme extends Themelet
         return '<p>Search for posts by extension</p>
 
         <div class="command_example">
-        <pre>ext=jpg</pre>
+        <code>ext=jpg</code>
         <p>Returns posts with the extension "jpg".</p>
         </div>
 
@@ -33,7 +33,7 @@ class MimeSystemTheme extends Themelet
         <p>Search for posts by MIME type</p>
 
         <div class="command_example">
-        <pre>mime=image/jpeg</pre>
+        <code>mime=image/jpeg</code>
         <p>Returns posts that have the MIME type "image/jpeg".</p>
         </div>
 

ext/notes/theme.php

@@ -192,20 +192,20 @@ class NotesTheme extends Themelet
     {
         return '<p>Search for posts with notes.</p>
         <div class="command_example">
-        <pre>note=noted</pre>
+        <code>note=noted</code>
         <p>Returns posts with a note matching "noted".</p>
         </div>
         <div class="command_example">
-        <pre>notes>0</pre>
+        <code>notes>0</code>
         <p>Returns posts with 1 or more notes.</p>
         </div>
         <p>Can use &lt;, &lt;=, &gt;, &gt;=, or =.</p>
         <div class="command_example">
-        <pre>notes_by=username</pre>
+        <code>notes_by=username</code>
         <p>Returns posts with note(s) by "username".</p>
         </div>
         <div class="command_example">
-        <pre>notes_by_user_id=123</pre>
+        <code>notes_by_user_id=123</code>
         <p>Returns posts with note(s) by user 123.</p>
         </div>
         ';

ext/numeric_score/theme.php

@@ -95,38 +95,38 @@ class NumericScoreTheme extends Themelet
     {
         return '<p>Search for posts that have received numeric scores by the score or by the scorer.</p>
         <div class="command_example">
-        <pre>score=1</pre>
+        <code>score=1</code>
         <p>Returns posts with a score of 1.</p>
         </div>
         <div class="command_example">
-        <pre>score>0</pre>
+        <code>score>0</code>
         <p>Returns posts with a score of 1 or more.</p>
         </div>
         <p>Can use &lt;, &lt;=, &gt;, &gt;=, or =.</p>
 
         <div class="command_example">
-        <pre>upvoted_by=username</pre>
+        <code>upvoted_by=username</code>
         <p>Returns posts upvoted by "username".</p>
         </div>
         <div class="command_example">
-        <pre>upvoted_by_id=123</pre>
+        <code>upvoted_by_id=123</code>
         <p>Returns posts upvoted by user 123.</p>
         </div>
         <div class="command_example">
-        <pre>downvoted_by=username</pre>
+        <code>downvoted_by=username</code>
         <p>Returns posts downvoted by "username".</p>
         </div>
         <div class="command_example">
-        <pre>downvoted_by_id=123</pre>
+        <code>downvoted_by_id=123</code>
         <p>Returns posts downvoted by user 123.</p>
         </div>
 
         <div class="command_example">
-        <pre>order:score_desc</pre>
+        <code>order:score_desc</code>
         <p>Sorts the search results by score, descending.</p>
         </div>
         <div class="command_example">
-        <pre>order:score_asc</pre>
+        <code>order:score_asc</code>
         <p>Sorts the search results by score, ascending.</p>
         </div>
         ';

ext/private_image/theme.php

@@ -12,11 +12,11 @@ class PrivateImageTheme extends Themelet
     {
         return '<p>Search for posts that are private/public.</p>
         <div class="command_example">
-        <pre>private:yes</pre>
+        <code>private:yes</code>
         <p>Returns posts that are private, restricted to yourself if you are not an admin.</p>
         </div>
         <div class="command_example">
-        <pre>private:no</pre>
+        <code>private:no</code>
         <p>Returns posts that are public.</p>
         </div>
         ';

ext/relationships/theme.php

@@ -75,23 +75,23 @@ class RelationshipsTheme extends Themelet
     {
         return '<p>Search for posts that have parent/child relationships.</p>
         <div class="command_example">
-        <pre>parent=any</pre>
+        <code>parent=any</code>
         <p>Returns posts that have a parent.</p>
         </div>
         <div class="command_example">
-        <pre>parent=none</pre>
+        <code>parent=none</code>
         <p>Returns posts that have no parent.</p>
         </div>
         <div class="command_example">
-        <pre>parent=123</pre>
+        <code>parent=123</code>
         <p>Returns posts that have image 123 set as parent.</p>
         </div>
         <div class="command_example">
-        <pre>child=any</pre>
+        <code>child=any</code>
         <p>Returns posts that have at least 1 child.</p>
         </div>
         <div class="command_example">
-        <pre>child=none</pre>
+        <code>child=none</code>
         <p>Returns posts that have no children.</p>
         </div>
         ';

ext/tag_categories/theme.php

@@ -113,11 +113,11 @@ class TagCategoriesTheme extends Themelet
     {
         return '<p>Search for posts containing a certain number of tags with the specified tag category.</p>
         <div class="command_example">
-        <pre>persontags=1</pre>
+        <code>persontags=1</code>
         <p>Returns posts with exactly 1 tag with the tag category "person".</p>
         </div>
         <div class="command_example">
-        <pre>cattags>0</pre>
+        <code>cattags>0</code>
         <p>Returns posts with 1 or more tags with the tag category "cat". </p>
         </div>
         <p>Can use &lt;, &lt;=, &gt;, &gt;=, or =.</p>

ext/trash/theme.php

@@ -10,7 +10,7 @@ class TrashTheme extends Themelet
     {
         return '<p>Search for posts in the trash.</p>
         <div class="command_example">
-        <pre>in:trash</pre>
+        <code>in:trash</code>
         <p>Returns posts that are in the trash.</p>
         </div>
         ';

themes/danbooru/style.css

@@ -100,6 +100,10 @@ font-size:0.9em;
 padding-left:10px;
 padding-top:8px;
 }
+CODE {
+background: #DEDEDE;
+font-size: 0.9rem;
+}
 form {
 margin:0;
 }

themes/danbooru2/style.css

@@ -165,6 +165,10 @@ font-size:0.8rem;
 FOOTER > DIV {
 margin: 1rem 2rem;
 }
+CODE {
+background: #DEDEDE;
+font-size: 0.9rem;
+}
 form {
 margin:0;
 }

themes/default/style.css

@@ -127,6 +127,11 @@ UL {
 	text-align: left;
 }
 
+CODE {
+	background: #BBB;
+	font-size: 0.9rem;
+}
+
 /* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * *
 *             the navigation bar, and all its blocks             *
 * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * */

themes/futaba/style.css

@@ -33,6 +33,7 @@ FOOTER {
 A, A:visited {text-decoration: none; color: #0000EE;}
 A:hover {text-decoration: underline; color: #DD0000;}
 HR {border: none; border-top: 1px solid #D9BFB7; height: 0; clear: both;}
+CODE {background: #DEDEDE; font-size: 0.9rem;}
 
 /* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * *
 *             the navigation bar, and all its blocks             *