Comprehensive fix for list styling in readme with improved markdown parser and CSS

This commit is contained in:
Marcus Quinn
2025-03-24 22:29:01 +00:00
parent ad2aba88a3
commit c16e1d62fd
2 changed files with 32 additions and 11 deletions

View File

@ -1016,14 +1016,16 @@ body.wp-admin .button.pricing-button:hover,
}
/* Readme list styling */
#readme .wp-allstars-markdown-content ul.wp-allstars-list,
#readme .wp-allstars-markdown-content ul {
padding-left: 25px;
margin: 10px 0;
list-style-type: disc;
}
#readme .wp-allstars-markdown-content ol.wp-allstars-list,
#readme .wp-allstars-markdown-content ol {
padding-left: 15px; /* Even less padding for ordered lists to match the visual alignment */
padding-left: 15px; /* Less padding for ordered lists to match the visual alignment */
margin: 10px 0;
list-style-type: decimal;
}
@ -1035,13 +1037,24 @@ body.wp-admin .button.pricing-button:hover,
padding-left: 5px; /* Add consistent padding for all list items */
}
/* Ensure consistent styling for all lists across sections */
/* Ensure consistent spacing for all lists across sections */
#readme .wp-allstars-markdown-content h2 + ul,
#readme .wp-allstars-markdown-content h3 + ul,
#readme .wp-allstars-markdown-content p + ul,
#readme .wp-allstars-markdown-content h2 + ol,
#readme .wp-allstars-markdown-content h3 + ol,
#readme .wp-allstars-markdown-content p + ol {
#readme .wp-allstars-markdown-content p + ol,
#readme .wp-allstars-markdown-content h2 + .wp-allstars-list,
#readme .wp-allstars-markdown-content h3 + .wp-allstars-list,
#readme .wp-allstars-markdown-content p + .wp-allstars-list {
margin-top: 10px;
margin-bottom: 15px;
}
/* Additional fix for specific sections that need help */
#readme .wp-allstars-markdown-content h2 + ul,
#readme .wp-allstars-markdown-content h3 + ul {
padding-left: 25px !important;
margin-left: 0 !important;
list-style-type: disc !important;
}

View File

@ -88,15 +88,23 @@ class WP_Allstars_Readme_Manager {
$markdown = preg_replace('/\*\*(.*?)\*\*/s', '<strong>$1</strong>', $markdown);
$markdown = preg_replace('/\*(.*?)\*/s', '<em>$1</em>', $markdown);
// Lists
$markdown = preg_replace('/^- (.*?)$/m', '<li>$1</li>', $markdown);
$markdown = preg_replace('/^\* (.*?)$/m', '<li>$1</li>', $markdown);
$markdown = preg_replace('/(<li>.*?<\/li>\n)+/s', '<ul>$0</ul>', $markdown);
// Process lists first - identify all list items
$markdown = preg_replace('/^- (.*?)$/m', '<li class="bullet-item">$1</li>', $markdown);
$markdown = preg_replace('/^\* (.*?)$/m', '<li class="bullet-item">$1</li>', $markdown);
$markdown = preg_replace('/^\d+\. (.*?)$/m', '<li class="number-item">$1</li>', $markdown);
// Numbered Lists
$markdown = preg_replace('/^\d+\. (.*?)$/m', '<li>$1</li>', $markdown);
// Convert consecutive numbered list items to an ordered list
$markdown = preg_replace('/((?:<li>.*?<\/li>\n)+)(?!<\/ul>|<\/ol>)/s', '<ol>$1</ol>', $markdown);
// Group consecutive list items into appropriate list types
// First group bullet items into unordered lists
$markdown = preg_replace('/((?:<li class="bullet-item">.*?<\/li>\n)+)/s', '<ul class="wp-allstars-ul">$1</ul>', $markdown);
// Then group numbered items into ordered lists
$markdown = preg_replace('/((?:<li class="number-item">.*?<\/li>\n)+)/s', '<ol class="wp-allstars-ol">$1</ol>', $markdown);
// Clean up the classes from the final output
$markdown = str_replace('class="bullet-item"', '', $markdown);
$markdown = str_replace('class="number-item"', '', $markdown);
$markdown = str_replace('class="wp-allstars-ul"', 'class="wp-allstars-list"', $markdown);
$markdown = str_replace('class="wp-allstars-ol"', 'class="wp-allstars-list"', $markdown);
// Links
$markdown = preg_replace('/\[(.*?)\]\((.*?)\)/s', '<a href="$2" target="_blank">$1</a>', $markdown);