Howdy, Stranger!
Categories
- 4.8K All Categories
- 4.3K Life in Lusternia
- 453 Announce Posts
- 75 Event Posts
- 1.7K Common Grounds
- 589 Q&A
- 83 Combat Overhaul
- 1.5K World Library
- 86 Combat Logs
- 870 Event Scrolls
- 403 Mechanic's Corner
- 329 Ideas
- 314 Last Chance Trading Post
- 478 Life Outside of Lusternia
- 9 Forum News
- 275 The Real World
- 94 Meet and Greet
- 37 The Funnies
- 63 Mafia Hideout
In this Discussion
Tutorial: How to Clean Logs
Table of Contents
These tutorials assume no knowledge of HTML or CSS. Some suggestions here are hacks to get readable logs quickly.
🦋 Side Note: Clean code makes use of semantic elements! If interested in writing webpages from scratch or and creating your own themes (for blogs), check out tutorials like HTMLDog and resources like MDN Web Docs.
3
(c) Iron Realms Entertainment 2012.
Comments
How to Edit and View HTML files
HTML files can be viewed in any Internet browser, and may open in them by default. To edit the file, you'll want a text editor, like Notepad, or a code editor, like Notepad++, Sublime, Microsoft Visual Studio (free Community edition), etc. Code editors will let you do multiline find-replace and regex find-replace, so I recommend one of them.
Do one of the following:
You can have the file open in both your editor and your browser. When making edits, save the file, and refresh in your browser to view the changes.
Avatar made through Picrew
MUSHClient
MUSHClient makes it easy to configure 'preamble' and 'postamble', text prepended and appended to the file itself and optionally to each line. Use keyboard shortcut Alt+3, or go to menu Game > Configure > Logging...
Replace the document preamble:
<html> <head> <title>Log of %N session</title> <style type="text/css"> body { font-family: "FixedSys", "Lucida Console", "Courier New", "Courier", monospace; background: #000000; } pre { max-width: 44em; white-space: pre-line; } </style> </head> <body><pre>Postamble:
And clear preamble and postamble for output lines, commands, and script.
The background colour should be whatever your background is in Appearance > ANSI Colour. The `pre` tag styling (for a preformatted element) is optional, to get your log to appear as if wrapping at 80 characters. You can remove that block if you wish. The max-width depends on your font face and size and may need adjusting.
What remains is removing your prompt. (If you have Log Commands checked, I recommend using a regex to remove those.) If your vitals don't change, you can do a quick find-replace of prompt to an empty string. Your line may look different depending on how your prompt is configured.
Example:
If your vitals are changing (due to losing balance, Chaos Domoth blessing, etc.) then you may want to use a regex find-replace. Online regex testers like RegEx Pal may help figure out a matching regex.
Important! If you remove any other extraneous content, make sure the closing </font> tag is removed also, like in the example for the prompt above. It may be on the next line.
Avatar made through Picrew
Nexus
Nexus saves everything on one line in the file. Have word wrap on in your editor. (Full-featured code editors or dev environments can also format it to be readable, but this tutorial assumes you're using something simpler.) Nexus puts lines within div elements, so for legibility, find-replace <div> with <div> plus a new line! You may need a code editor for multiline find or replace.
Viewed in an Internet browser, your log may have text stretching across the full width of the screen. We can get it to the same width and make it the same font if desired.
Nexus Quick edits:
After saving a log and opening the file, you'll see this at the top:
<html><head><style>body { background-color: black; color: #aaa; } div { ...For legibility, you can format it like this. Some values may be different (font, font size, colours, etc.) depending on what you've configured in your Nexus.
<html> <head> <style> body { background-color: black; color: #aaa; } div { line-height: 120%; font-family: Verdana, Geneva, sans-serif; font-size: 13px; white-space: pre-wrap; word-wrap: break-word;} .mono { font-family: monospace; } .timestamp { font-family: monospace; color: #555; } .timestamp { display: none; } </style> </head>To get lines to roughly wrap at 80 characters, you can insert `max-width: 48em;` to the div styling. You can also replace the font-family value with `monospace` if you'd like.
<html> <head> <style> body { background-color: black; color: #aaa; } div { line-height: 120%; font-family: monospace, sans-serif; font-size: 13px; white-space: pre-wrap; word-wrap: break-word; max-width: 48em; } // leaving rest as-isImportant! If you remove any other extraneous content, make sure the closing tag is removed also. See the glossary at the end for details.
Nexus Advanced edits - Paragraph spacing:
If you want lines between blocks of text, you can add in `div:not(.mono) {padding-bottom: 1.2em;}`, but this will also put spaces between room title, room descriptions, exits, etc. If you want to remove those, you can add in another CSS class (i.e., `.no-padding`) manually or with a regex.
<html> <head> <style> body { background-color: black; color: #aaa; } div { line-height: 120%; font-family: monospace, sans-serif; font-size: 13px; white-space: pre-wrap; word-wrap: break-word; max-width: 48em; } div:not(.mono), div:not(.no-padding) { padding-bottom: 1.2em; } // leaving rest as-isThen either manually or with find-replace using regexes, add in 'no-padding' to divs where you don't want padding before. This works particularly well if you have a unique colour for room titles or the lines you want to replace. Examples:
Regex replace room titles with colour `#555555`
Avatar made through Picrew
Mudlet
Mudlet will put in line breaks based on your word wrap setting in Options > Preferences. Within the 'Main display' tab is the option to 'Wrap Lines at'.
I keep regexes to do a find-replace of my prompt and any commands entered. Yours may be different depending on how your prompt is configured. Online regex testers like RegEx Pal may help figure out a matching regex.
As an example, I do a find-replace of commands I've entered with a line break.
And I delete my prompt in between other outputs.
Important! If you remove any other extraneous content, make sure the closing tag is removed also. See the glossary at the end for details.
Avatar made through Picrew
Glossary of HTML and CSS
HTML5 (Hyper-Text Markup Language version 5) is the language we use for displaying webpages. HTML elements are denoted with tags in angle brackets. Most have a opening and closing tag, e.g., a division tag is opened with <div> and closed with </div>. Our MUD Clients use this existing language, and each HTML document has these tags.
Other tags you may see multiple times in the body are:
Depending on how your client handles preserving new lines, you may also see:
CSS (Cascading Style Sheets) is a language we use for how to present HTML documents. We can target styles to particular HTML tags (e.g., to the whole body, or to all p tags). We can also define classes that can be used repeatedly (e.g., on spans with class="timestamp"). Styles you may adjust often in logs include (linking to MDN):
Avatar made through Picrew