daizutabi / mkapi

A plugin for MkDocs to generate API documentation
https://daizutabi.github.io/mkapi/
MIT License
103 stars 19 forks source link

[Enhancement] Theme support #8

Closed Ahrak closed 9 months ago

Ahrak commented 4 years ago

It would be nice to have the option to use different themes in mkdocs.

My suggestion: read the theme entry from mkdocs.yml and choose the corresponding theme from mkapi/theme folder. If the theme is not available than use the default one.

Additionally i would like to have two options for the plugin:

Currently i am adding a custom css file to overwrite the theme to match the readthedocs-style, but this isn't ideal.

daizutabi commented 4 years ago

I modified CSS for readthedocs and mkdocs themes.

Ahrak commented 4 years ago

thanks for your work!

The mkapi-readthedocs doesn't add the right styles but now it is better customizable with fewer css lines. I share my css code her if someone would have the original readthedocs style:

.mkapi-node {
    font-family: "Lato","proxima-nova","Helvetica Neue",Arial,sans-serif;
}

.mkapi-section-name-parameters, 
.mkapi-section-name-attributes, 
.mkapi-section-name-returns, 
.mkapi-section-name-yields, 
.mkapi-section-name-raises, 
.mkapi-section-name-methods, 
.mkapi-section-name-functions, 
.mkapi-section-name-classes {
    background: none;
    border-bottom: none;
}

div.mkapi-object.code, 
h1.mkapi-object.code, 
h2.mkapi-object.code, 
h3.mkapi-object.code, 
h4.mkapi-object.code {

    background: none;
    border: none;
    margin: 6px 0;
    margin-top: 6px;
    padding: 6px;
    padding-right: 12px;
    border-left: solid 3px #ccc;
    background: #f0f0f0;
    color: #111;
    width: max-content;
}

div.mkapi-object.code code.mkapi-object-signature {
    color: #555;
    font-style: italic;
    font-size: 90%;
}

h1.mkapi-object.plain {
    font-size: 150%;
    margin-top: 0;
    font-weight: 700;
    font-family: "Roboto Slab","ff-tisa-web-pro","Georgia",Arial,sans-serif;
}

div.mkapi-object-class.code {
    background: none;
    border: none;
    font-size: 90%;
    line-height: normal;
    background: #e7f2fa;
    color: #2980B9;
    border-top: solid 3px #6ab0de;

}

div.mkapi-object.code.mkapi-object-class code.mkapi-object-name {
    color: #111;
}

div.mkapi-object.code.mkapi-object-class code.mkapi-object-signature {
    color: #2980B9;
    font-weight: 700;
}

.mkapi-object-kind.mkapi-object-kind-class {
    color: inherit;
}

div.mkapi-object.code code.mkapi-object-prefix
{
    color: #111;
}

.mkapi-args-type {
    color: #2980B9;
    cursor: pointer;
}

.mkapi-section-body-returns
{
    padding-left: 48px;    
}
.mkapi-node ul.mkapi-args-list {
    padding-left: 32px;
    /*margin-top: -32px;*/
}
daizutabi commented 4 years ago

Thanks for your sharing.

I reconstructed Jinja2 templates in Version 1.0.5 because I added a new feature that creates bidirectional link between document and source code. This broke CSS compatibility with previous version. I modified the current CSS referring to your code. If you find something wrong, I hope you will send PR. Thank you.

tony commented 4 years ago

Is there a way to override the jinja2 templates in the current release (1.0.12)? @daizutabi