How to enable horizontal scrolling in code block?

Description of the problem

I haven’t updated obsidian for a long time and after updating from version 0.11.* to 0.13.19 a very important function for me disappeared, and I don’t know how to get it back.

Between ``` and ``` you can write a multi-line block of code and previously this block had horizontal scrolling. Now all lines are wrapped. It’s terribly uncomfortable

Here’s what it looks like without scrolling

by turning off the “line wrapping” setting, I can show how it looked like with scrolling. But this is not what I want, because scrolling appears for the entire text, and not separately for a block of code.


Scroll all text (not just the block of code)

While I was writing this post, I decided to check how the code will be displayed here on this forum, and it is displayed exactly the way I want it to be displayed in obsidian

@Service  
public class UserService implements UserDetailsService {  
	
	private final UserRepository userRepository;  
	
	public UserService(UserRepository userRepository) {  
		this.userRepository = userRepository;  
	}

	@Override  
	@Transactional(readOnly = true)  
	public UserDetails loadUserByUsername(String username) throws UsernameNotFoundException {  
	return userRepository.findByName(username)  
		.map(user -> new User(  
			user.getName(),  
			user.getPassword(),  
			user.getRoles().stream().map(role -> new SimpleGrantedAuthority(role.getName())).collect(Collectors.toSet())  
			)  
		).orElseThrow(() -> new UsernameNotFoundException("Пользователь не найден"));  
	}
}

What I was trying to do

  • I didn’t find the right item in the settings. Maybe it can be done with css snippet?
  • I tried to change the editor to legacy, but it did not help
  • I’m even ready to roll back to the old version in order to return the functionality I need. But I did not find where to find the old release, I will be glad if you tell me

P.S. I use obsidian to take notes on programming lectures and I’m terribly uncomfortable working with it after the update. Am I the only one using this feature? Who even guessed to disable scrolling in a block of code? I resent.

P.S.S. Sorry, this is a duplicate of my previous post, but there was too little information

3 Likes

I have this same question. I cannot get a horizontal scroll bar in 0.13.19 no matter what I try.

Yes I really thought this used to be the default. Was this an intentional change? I don’t understand how to turn it on either.

I can’t seem to find a link to where I saw this, but I did see mention on here from a developer that they changed this default setting in 13.xx so now it wraps by default.

I was able to get the scroll bar back in read mode with this CSS:

.theme-light code, .theme-light pre {
    white-space: pre;
    overflow-x:auto;
}

This works both for blocks where the language is specified and also when it is not. The only issue is the ‘copy’ button also scrolls for blocks where the language is not specified. Not sure how to fix that.

Also, i’m not sure how to get this working in edit mode. I primarily use preview / edit mode so my fix doesn’t help me much.

1 Like

This appears to work for preview mode

.theme-dark .HyperMD-codeblock, .theme-dark pre {
    white-space: pre;
    overflow-x:auto;
}

(replace dark->light depending on your theme)

1 Like

Sorry, this only kind-of works for preview mode, unfortunately it put a line under each long line however, not the whole code block.

1 Like

This topic was automatically closed 30 days after the last reply. New replies are no longer allowed.