How can i use a special character as the HTML list item marker?

HTML 

<ul class="special-bullets">
  <li>Item one</li>
  <li>Item two</li>
  <li>Item three</li>
</ul>

CSS

.special-bullets {
  list-style-type: none;      /* remove default bullet */
  padding-left: 1.4em;        /* adjust indent as needed */
}

.special-bullets li::marker {
  content: "★ ";              /* ← your special character + space */
  /* content: "✔ "; */
  /* content: "➜ "; */
  /* content: "🚀 "; */        /* emoji also works */
  color: #e91e63;             /* optional: color the marker */
  font-size: 1.1em;           /* optional: size */
} 

 

You can also style the number in the same way:

ol.fancy-numbers li::marker {
  content: counter(list-item) ". ";   /* default is "1. " */
  color: navy;
  font-weight: bold;
} 

 

How to convert a PDF file into a Markdown file or HTML file?

To convert a PDF into a Markdown file using the Python-based tool called Marker on Ubuntu, you need to set up the environment, install the

marker-pdf package, and then use the command-line interface. 

Prerequisites

Before installing Marker, ensure your Ubuntu system meets the following prerequisites:

• Python: Version 3.10 or higher is required.
• PyTorch: Marker needs PyTorch to run, as it relies on deep learning models.
• System Libraries: You may need additional system libraries for advanced features like OCR with ocrmypdf or tesseract. 

Step-by-Step Guide

1. Open your terminal on Ubuntu.
2. Install system dependencies (optional, but recommended for full functionality, including OCR):
   bash

   # Install required apt packages
   sudo apt-get update
   sudo apt-get install -y build-essential libssl-dev libffi-dev python3-dev
   # Install tesseract and ghostscript related dependencies
   sudo apt-get install -y libleptonica-dev libtesseract-dev pkg-config
   sudo apt-get install -y ocrmypdf ghostscript
   

3. Create a virtual environment to avoid conflicts with other Python projects (recommended):
   bash

   python3 -m venv marker_env
   source marker_env/bin/activate
   

4. Install PyTorch by following the instructions on the official PyTorch website for your specific system configuration (CPU or GPU). A typical CPU-only installation command might look like:
   bash

   pip install torch torchvision torchaudio
   

5. Install Marker using pip. You can install the basic PDF package or the full version for other document types:
   bash

   # For PDF conversion only
   pip install marker-pdf
   
   # For full functionality (PDFs, images, etc.)
   # pip install 'marker-pdf[full]'
   

6. Convert a PDF file to Markdown using the command line tool marker_single.
   
   $ marker_single /path/to/file.pdf  
   
   --output_format [markdown|json|html|chunks]: Specify the format for the output results.
   --output_dir PATH: Directory where output files will be saved. Defaults to the value specified in settings.OUTPUT_DIR.
   
   https://github.com/datalab-to/marker

cssUniversal.html

<style>

    body {

        margin: 0;

        background-color: rgba(0, 0, 0, 0.09);

        color: rgba(0, 0, 0, 0.6);

        font-family: sans-serif;

    }

    div.container {

        display: flex;

        justify-content: center;

        min-height: 100vh;

        padding: 1rem;

    }

    div.card {

        background-color: rgba(255, 255, 255, 1);

        max-width: 585px;

        width: 100%;

        box-shadow:

            0 4px 8px 0 rgba(0, 0, 0, 0.2),

            0 6px 20px 0 rgba(0, 0, 0, 0.19);

        padding: 1rem;

        border-radius: 4px;

    }

    h1,

    h2,

    h3 {

        margin: 1.5rem 0 0.75rem 0;

    }

    div.card {

        padding-bottom: 3rem;

    }

    .contact {

        text-align: center;

    }

    table {

        font-family: Arial, Helvetica, sans-serif;

        border-collapse: collapse;

        width: 100%;

    }

    

    td, th {

        border: 1px solid #ddd;

        padding: 8px;

    }

    

    tr:nth-child(even){background-color: #f2f2f2;}

    

    tr:hover {background-color: #ddd;}

    

    th {

        padding-top: 12px;

        padding-bottom: 12px;

        text-align: left;

        background-color: #04AA6D;

        color: white;

    }

    @media print {

        body {

            background: white !important;

        }

        .container {

            display: block;

            min-height: auto;

            padding: 0;

            margin: 0;

        }

        .card {

            box-shadow: none !important;

            border: none;

            background: white !important;

            max-width: 100%;

            padding: 1in;

        }

        body, p, li, h1, h2, h3 {

            color: black; !important;

            font-family: "Arial", sans-serif;

        }

        nav, footer, .no-print {

            display: none !important;

        }

        a {

            color: black;

            text-decoration: none;

        }

    }

</style>

<body>

    <div class="container">

        <div class="card">

            <div class="contact">...</div>

            ...

        </div>

    </div>

</body>

Beautiful Letter with Shadow

<style>
    body {
        margin: 0;
        background-color: rgba(0, 0, 0, 0.09);
        color: rgba(0, 0, 0, 0.6);
        font-family: sans-serif;
    }

    div.container {
        display: flex;
        justify-content: center;
        min-height: 100vh;
        padding: 1rem;
    }

    div.card {
        background-color: rgba(255, 255, 255, 1);
        max-width: 585px;
        width: 100%;
        box-shadow:
            0 4px 8px 0 rgba(0, 0, 0, 0.2),
            0 6px 20px 0 rgba(0, 0, 0, 0.19);
        padding: 1rem;
        border-radius: 4px;
    }

    h1,
    h2,
    h3 {
        margin: 1.5rem 0 0 0;
    }

    div.card {
        padding-bottom: 3rem;
    }

    .contact {
        text-align: center;
    }

    @media print {
        body {
            background: white !important;
        }

        .container {
            display: block;
            min-height: auto;
            padding: 0;
            margin: 0;
        }

        .card {
            box-shadow: none !important;
            border: none;
            background: white !important;
            max-width: 100%;
            padding: 1in;
        }

        body, p, li, h1, h2, h3 {
            color: black; !important;
            font-family: "Arial", sans-serif;
        }

        nav, footer, .no-print {
            display: none !important;
        }

        a {
            color: black;
            text-decoration: none;
        }
    }
</style>

<body>
    <div class="container">
        <div class="card">
            <div class="contact">...</div>
            ...
        </div>
    </div>
</body>

How to Transform or Say Convert Different Format of Files Such as .md, .rst, .html, .docx, .pdf, etc.?

Install 'pandoc' software

How to install pandoc?

$ sudo apt update
$ sudo apt install pandoc

 

How to use pandoc?

$ tldr pandoc 

How to Install and Use Prettier on Ubuntu?

# npm install -g prettier

How to make html and css and javaScript files
prettier?

$ prettier --tab-width 4 --write test.html 

How to update prettier

# npm update -g prettier

Note: -g means global

reStructuredText Markup Specification

reStructuredText Markup Specification

The reStructuredText_ Cheat Sheet: Syntax Reminders

Get HTML color codes, Hex color codes, RGB and HSL values with our color picker, color chart and HTML color names

https://htmlcolorcodes.com/

How to limit width of table to within screen width with html and css?

How to limit width of a wide table to within screen width with html and css?

Solution: Do the following 2 things

1. <table style='table-layout: fixed'>

2. Set width for every columns in the first row (you can leave the last column, or any one column of all)

<thead>

  <tr>

    <th style='width: 5%; >blah...</th>

    <th style='width: 10%; >blah...</th>

    <th style='width: 25%; >blah...</th>

    <th style='width: 25%; >blah...</th>

    <th>blah...</th>

  </tr>

</thead>

That is all.

How to find the differences between two similar html (or other) code?

https://diffchecker.com

How to automatically format/beautify html code which was not indent properly and new line properly, or validate html code with some missing elements?

Validate

https://validator.w3.org/


Beautify

https://github.com/htacg/tidy-html5

https://freeformatter.com

Seeing the web page at once, after you copy html, css, javascript there

https://codepen.io

How to convert a .rst file into a .html file?

If docutils is not installed, install it with the following command -

#python -m pip install docutils

===================================================

Method 1 (better than Method 2)

https://docutils.sourceforge.io/docs/user/tools.html#rst2html5-py

# rst2html5.py --help

# rst2html5.py <source_rst_file_name.rst> <output.html>


===================================================

Method 2

https://www.geeksforgeeks.org/restructuredtext-rst-file-to-html-file-using-python-for-documentations/

The following python script will convert 'restructured.rst' into 'output.html'


import docutils.core

docutils.core.publish_file(
    source_path ="restructured.rst",
    destination_path ="Output.html",
    writer_name ="html")

How to build HTML emails with Bootstrap?

https://bootstrapemail.com/docs/introduction

export pandas dataframe to html and appy css styles

 export pandas dataframe to html and appy css styles

 

 Ku Tang Pan

I found the most precise, and frankly the easiest way of doing it is skipping the styling, to_html() etc. and converting the DF to a dictionary using the df.to_dict() method.

Specifically what gave me trouble, was displaying the styled pandas html in an outlook email, as it just wouldn't render properly with the css mess that pandas was producing.

iterate over the dict and generate the html there by simply wrapping keys/values in the tags that you need, adding classes etc. and concatenate this all into one string. Then paste this str into a prepared template with a predefined css.

For convenience I found it's useful to export the same df twice, using .to_dict() and to_dict('index') to first fill in the columns and then work your way down row by row. Alternatively just have a list of relevant column names.

dict_data = [df.to_dict(), df.to_dict('index')]

return_str = '<table><tr>'

for key in dict_data[0].keys():
    return_str = return_str + '<th class="header">' + key + '</th>'

return_str = return_str + '</tr>'

for key in dict_data[1].keys():
    return_str = return_str + '<tr><th class="index">' + key + '</th>'
    for subkey in dict_data[1][key]:
        return_str = return_str + '<td>' + dict_data[1][key][subkey] + '</td>'

return_str = return_str + '</tr></table>'

and then return_str goes into the template.

 

Working with Django Templates & Static Files

https://www.digitalocean.com/community/tutorials/working-with-django-templates-static-files

 

Unclosed Tag Checker

 Unclosed Tag Checker

https://www.aliciaramirez.com/closing-tags-checker/

How to list all html files in a directory recursively sorted by file size?

 How to list all html files in a directory recursively sorted by file size?

$du -a -h | sort -nr | grep 'html' | less

Note:

1. '-a' means all files and directories, not just directories.

2. '-h' means human readable.

3. '-n' means numeric sort.

4. '-r' means recursive.

Vi - How to Automatic Indent?

 Vi - How to Automatic Indent?

Windows

In Vim folder, create a text file named '_vimrc' with the following contents -

filetype plugin indent on

autocmd FileType html setlocal shiftwidth=2 tabstop=2

autocmd FileType python setlocal expandtab shiftwidth=4 softtabstop=4

How to make your html5 animation clickable?

How to make your html5 animation clickable?

After you publish your animation in Adobe Animate, you get an html file.

Open the html file, in the html body, find the '<canvas> ... </canvas> part. Insert '<a href="..."> in the front of <canvas>, and put '</a>' after '</canvas>'. It is so easy! :)